it-swarm.com.de

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 setze, 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 Dienst REST diese Eigenschaft als einen 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 zu ändern von meinem Modell?

Hier ist die jsFiddle, die nicht arbeitende und arbeitende Objekte zeigt

195
peteallen

Der korrekte Ansatz in Angularjs ist die Verwendung von ng-value für Nicht-String-Werte von Modellen.

Ä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

369
kumarharsh

Das ist ein seltsamer Ansatz mit isUserAnswer. Werden Sie wirklich alle drei Auswahlmöglichkeiten an den Server zurücksenden, wo jede einzelne nach isUserAnswer == true Durchsucht wird? Wenn ja, können Sie dies 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, den Kurs 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.

20
Langdon
 <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>
10
Ronel Gonzales

Ich habe versucht, value="true" In ng-value="true" Zu ändern, 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. response sollte zu response1 und response2 werden.

7
seung

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 "true" und "false" Zeichenfolgen und keine booleschen Werte sind.

1
Karen Zilles

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 sich dazu entschließen, alle wahren Werte anzugeben. Ein soliderer Ansatz besteht darin, den einzelnen Gruppen ein eigenes Modell zuzuweisen 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-Codes:

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

nd eine Geige.

0
rGil

wenn Sie eine boolesche Variable zum Binden des Optionsfelds verwenden. 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>
0
Sahitya M