AngularJS - Bindung von Optionsfeldern an Modelle mit booleschen Werten

Ich habe ein problem verbindlich, radio-buttons, um ein Objekt, dessen Eigenschaften haben Boolesche Werte. Ich versuche, display prüfungsfragen abgerufen von einem $resource.

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
        }]
};

Mit diesem Beispiel-Objekt, die "isUserAnswer: true" - Eigenschaft bewirkt nicht, dass der radio-button ausgewählt werden. Wenn ich Kapseln die boolean-Werte in Anführungszeichen, es funktioniert.

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 mein REST-service behandelt, die Eigenschaft als boolean, und es wird schwierig sein, zu ändern, die JSON-Serialisierung zu Kapseln diese Werte in Anführungszeichen gesetzt werden. Gibt es eine andere Möglichkeit zum einrichten der Modell-Bindung ohne änderung der Struktur des Modelles?

Hier ist das jsFiddle zeigen, dass nicht-arbeiten und Objekte

InformationsquelleAutor der Frage peteallen | 2013-06-06

352

Der richtige Ansatz in Angularjs ist die Verwendung ng-value für "nicht-string" - Werte der Modelle.

Ä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: Gerade aus dem Maul des Pferdes

InformationsquelleAutor der Antwort kumar_harsh
20

Dass eine ungerade Ansatz mit isUserAnswer. Werden Sie wirklich senden Sie alle drei Entscheidungen an den server zurück, wo es in einer Schleife durch jede Prüfung für isUserAnswer == true? Wenn ja, können Sie versuchen, diese:

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 empfehle ich Ihnen ändern Sie Ihre tack:

http://jsfiddle.net/hgxjv/5/
```
<input type="radio" name="response" value="{{choice.id}}" ng-model="question1.userChoiceId"/>
```
Diese Weise können Sie senden Sie einfach {{question1.userChoiceId}} zurück an den server.

InformationsquelleAutor der Antwort Langdon

Hallo hoffe es hilft Ihnen.

 <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>

InformationsquelleAutor der Antwort Ronel Gonzales

7

Habe ich versucht eine änderung value="true" zu ng-value="true"und es scheint zu funktionieren.

<input type="radio" name="response2" data-ng-model="choice.isUserAnswer" ng-value="true" />

Auch, um die beiden Eingänge, in Ihrem Beispiel, würden Sie haben, um unterschiedliche Namen für jeden Eingang -- z.B. response werden sollte response1 und response2.

InformationsquelleAutor der Antwort seung
1

Könnten Sie werfen Sie einen Blick auf diese:

https://github.com/michaelmoussa/ng-boolean-radio/

Dieser Kerl schrieb eine benutzerdefinierte Richtlinie zu umgehen, das Problem, dass "true" und "false" sind Zeichenfolgen, nicht Boolean.

InformationsquelleAutor der Antwort Karen Zilles
0

Den Weg, Ihre radios sind in den fiddle - sharing-das gleiche Modell - führt dazu, dass nur die Letzte Gruppe zeigen einen geprüften radio, wenn Sie sich entscheiden, zu zitieren, alle truthy-Werte. Eine weitere solide Vorgehen geben die einzelnen Gruppen Ihr eigenes Modell und setzen Sie den Wert als eindeutiges Attribut des radios, wie die id:
```
$scope.radioMod = 1;
$scope.radioMod2 = 2;
```
Hier ist eine Darstellung der 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 ein Turnschuh.

InformationsquelleAutor der Antwort rGil

wenn Sie mit boolean-variable binden Sie die radio-Taste. bitte finden Sie im folgenden Beispiel-code

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

InformationsquelleAutor der Antwort Sahitya M

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.