Ich habe ein Problem beim Binden von Optionsfeldern an ein Objekt, dessen Eigenschaften boolesche Werte haben. Ich versuche, Prüfungsfragen anzuzeigen, die aus einer $ -Ressource abgerufen wurden.
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
}]
};
Bei diesem Beispielobjekt bewirkt die Eigenschaft "isUserAnswer: true" nicht, dass das Optionsfeld ausgewählt wird. Wenn ich die booleschen Werte in Anführungszeichen kapsle, funktioniert es.
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"
}]
};
Leider behandelt mein REST-Service diese Eigenschaft als Booleschen Wert, und es wird schwierig sein, die JSON-Serialisierung zu ändern, um diese Werte in Anführungszeichen zu setzen. Gibt es eine andere Möglichkeit, die Modellbindung einzurichten, ohne die Struktur meines Modells zu ändern?
Hier ist die jsFiddle, die nicht funktionierende und funktionierende Objekte zeigt
quelle
Das ist ein seltsamer Ansatz
isUserAnswer
. Werden Sie wirklich alle drei Auswahlmöglichkeiten an den Server zurücksenden, wo er jede Prüfung durchläuftisUserAnswer == true
? Wenn ja, können Sie Folgendes versuchen:http://jsfiddle.net/hgxjv/4/
HTML:
JavaScript:
Alternativ würde ich empfehlen, Ihre Richtung zu ändern:
http://jsfiddle.net/hgxjv/5/
Auf diese Weise können Sie einfach
{{question1.userChoiceId}}
an den Server zurücksenden.quelle
ngChecked
, es sei denn, Sie müssen sich von der Verwendung von true / false als Zeichenfolgen lösen . Können Sie das tun? jsfiddle.net/hgxjv/6quelle
true
es als wahr bewertet wird. Wennng-value
es sich beispielsweise um eine Zeichenfolge handelt und nicht um einen Verweis auf etwas in$scope
, müssen Sie diese Zeichenfolge in Anführungszeichen setzen. Das war bei mir der Fall.Ich habe versucht , zu ändern
value="true"
zung-value="true"
, und es scheint zu funktionieren.<input type="radio" name="response2" data-ng-model="choice.isUserAnswer" ng-value="true" />
Damit beide Eingaben in Ihrem Beispiel funktionieren, müssen Sie jeder Eingabe einen anderen Namen geben - z . B.
response
sollteresponse1
und werdenresponse2
.quelle
Sie könnten einen Blick darauf werfen:
https://github.com/michaelmoussa/ng-boolean-radio/
Dieser Typ hat eine benutzerdefinierte Anweisung geschrieben, um das Problem zu umgehen, dass "wahr" und "falsch" Zeichenfolgen sind, keine Booleschen Werte.
quelle
Die Art und Weise, wie Ihre Funkgeräte in der Geige eingerichtet sind und dasselbe Modell verwenden, führt dazu, dass nur die letzte Gruppe ein geprüftes Funkgerät anzeigt, wenn Sie alle wahrheitsgemäßen Werte angeben. Ein soliderer Ansatz besteht darin, den einzelnen Gruppen ein eigenes Modell zu geben und den Wert als eindeutiges Attribut der Funkgeräte festzulegen, z. B. die ID:
Hier ist eine Darstellung des neuen HTML:
Und eine Geige.
quelle
Wenn Sie eine boolesche Variable verwenden, um das Optionsfeld zu binden. Bitte beziehen Sie sich auf den folgenden Beispielcode
quelle