Mam problem z powiązaniem przycisków opcji z obiektem, którego właściwości mają wartości logiczne. Próbuję wyświetlić pytania egzaminacyjne pobrane z zasobu $.
HTML:
<label data-ng-repeat="choice in question.choices">
<input type="radio" name="response" data-ng-model="choice.isUserAnswer" value="true" />
{{choice.text}}
</label>
JS:
$scope.question = {
questionText: "This is a test question.",
choices: [{
id: 1,
text: "Choice 1",
isUserAnswer: false
}, {
id: 2,
text: "Choice 2",
isUserAnswer: true
}, {
id: 3,
text: "Choice 3",
isUserAnswer: false
}]
};
W tym przykładowym obiekcie właściwość „isUserAnswer: true” nie powoduje wybrania przycisku opcji. Jeśli hermetyzuję wartości boolowskie w cudzysłowach, to działa.
JS:
$scope.question = {
questionText: "This is a test question.",
choices: [{
id: 1,
text: "Choice 1",
isUserAnswer: "false"
}, {
id: 2,
text: "Choice 2",
isUserAnswer: "true"
}, {
id: 3,
text: "Choice 3",
isUserAnswer: "false"
}]
};
Niestety moja usługa REST traktuje tę właściwość jako wartość logiczną i ciężko będzie zmienić serializację JSON, aby zawrzeć te wartości w cudzysłowach. Czy istnieje inny sposób skonfigurowania wiązania modelu bez zmiany struktury mojego modelu?
angularjs
data-binding
model
radio
Peteallen
źródło
źródło
To dziwne podejście
isUserAnswer
. Czy naprawdę zamierzasz odesłać wszystkie trzy opcje z powrotem do serwera, na którym będzie on przechodził przez każdą z nich w poszukiwaniuisUserAnswer == true
? Jeśli tak, możesz spróbować:http://jsfiddle.net/hgxjv/4/
HTML:
JavaScript:
Ewentualnie polecam zmianę halsu:
http://jsfiddle.net/hgxjv/5/
W ten sposób możesz po prostu odesłać z
{{question1.userChoiceId}}
powrotem na serwer.źródło
ngChecked
, z wyjątkiem tego, że będziesz musiał zerwać z użyciem wartości true / false jako ciągów. Możesz to zrobić? jsfiddle.net/hgxjv/6źródło
true
ocenia się na prawdę. Jeśli Twójng-value
ciąg znaków jest na przykład ciągiem, a nie odniesieniem do czegoś$scope
, musisz wpisać ten ciąg w cudzysłów. Tak było w moim przypadku.Próbowałem zmieniających
value="true"
sięng-value="true"
i wydaje się do pracy.<input type="radio" name="response2" data-ng-model="choice.isUserAnswer" ng-value="true" />
Ponadto, aby oba wejścia działały w twoim przykładzie, musisz nadać każdemu z nich inną nazwę - np.
response
Powinno się staćresponse1
iresponse2
.źródło
Możesz spojrzeć na to:
https://github.com/michaelmoussa/ng-boolean-radio/
Ten facet napisał niestandardową dyrektywę, aby obejść problem, że „prawda” i „fałsz” to ciągi, a nie booleany.
źródło
Sposób skonfigurowania radia w skrzypcach - współdzielenie tego samego modelu - spowoduje, że tylko ostatnia grupa pokaże sprawdzone radio, jeśli zdecydujesz się zacytować wszystkie prawdziwe wartości. Bardziej solidne podejście będzie polegało na nadaniu poszczególnym grupom własnego modelu i ustawieniu wartości jako unikalnego atrybutu radiotelefonów, takiego jak id:
Oto reprezentacja nowego html:
I skrzypce.
źródło
jeśli używasz zmiennej boolean do powiązania przycisku opcji. zapoznaj się z przykładowym kodem
źródło