AngularJS - Optionsfelder an Modelle mit Booleschen Werten binden

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

Der richtige Ansatz in Angularjs besteht darin, ng-valuefür Nicht-String-Werte von Modellen zu verwenden.

Ändern Sie Ihren Code wie folgt:

<label data-ng-repeat="choice in question.choices">
  <input type="radio" name="response" data-ng-model="choice.isUserAnswer" data-ng-value="true" />
  {{choice.text}}
</label>

Ref: Direkt aus dem Maul des Pferdes

Das ist ein seltsamer Ansatz isUserAnswer. Werden Sie wirklich alle drei Auswahlmöglichkeiten an den Server zurücksenden, wo er jede Prüfung durchläuft isUserAnswer == true? Wenn ja, können Sie Folgendes versuchen:

http://jsfiddle.net/hgxjv/4/

HTML:

<input type="radio" name="response" value="true" ng-click="setChoiceForQuestion(question1, choice)"/>

JavaScript:

$scope.setChoiceForQuestion = function (q, c) {
    angular.forEach(q.choices, function (c) {
        c.isUserAnswer = false;
    });

    c.isUserAnswer = true;
};

Alternativ würde ich empfehlen, Ihre Richtung zu ändern:

http://jsfiddle.net/hgxjv/5/

<input type="radio" name="response" value="{{choice.id}}" ng-model="question1.userChoiceId"/>

Auf diese Weise können Sie einfach {{question1.userChoiceId}}an den Server zurücksenden.

 <label class="rate-hit">
     <input type="radio" ng-model="st.result" ng-value="true" ng-checked="st.result">
     Hit
 </label>
 &nbsp;&nbsp;
 <label class="rate-miss">
     <input type="radio" ng-model="st.result" ng-value="false" ng-checked="!st.result">
     Miss
 </label>

Ich habe versucht , zu ändern value="true"zu ng-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. responsesollte response1und werden response2.

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.

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:

$scope.radioMod = 1;
$scope.radioMod2 = 2;

Hier ist eine Darstellung des neuen HTML:

<label data-ng-repeat="choice2 in question2.choices">
            <input type="radio" name="response2" data-ng-model="radioMod2" value="{{choice2.id}}"/>
                {{choice2.text}}
        </label>

Und eine Geige.

Wenn Sie eine boolesche Variable verwenden, um das Optionsfeld zu binden. Bitte beziehen Sie sich auf den folgenden Beispielcode

<div ng-repeat="book in books"> 
<input type="radio" ng-checked="book.selected"  
ng-click="function($event)">                        
</div>