AngularJS - Associare i pulsanti di opzione ai modelli con valori booleani

Sto riscontrando un problema nel collegare i pulsanti di opzione a un oggetto le cui proprietà hanno valori booleani. Sto cercando di visualizzare le domande d'esame recuperate da una risorsa $.

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

Con questo oggetto di esempio, la proprietà "isUserAnswer: true" non determina la selezione del pulsante di opzione. Se incapsulo i valori booleani tra virgolette, funziona.

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

Sfortunatamente il mio servizio REST tratta quella proprietà come booleana e sarà difficile cambiare la serializzazione JSON per incapsulare questi valori tra virgolette. Esiste un altro modo per impostare l'associazione del modello senza modificare la struttura del mio modello?

Ecco il jsFiddle che mostra oggetti non funzionanti e funzionanti

L'approccio corretto in Angularjs è utilizzare ng-valueper valori non stringa di modelli.

Modifica il tuo codice in questo modo:

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

Rif: Direttamente dalla bocca del cavallo

È un approccio strano con isUserAnswer. Hai davvero intenzione di rinviare tutte e tre le scelte al server dove eseguirà il ciclo di ciascuna verifica per isUserAnswer == true? In tal caso, puoi provare questo:

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

In alternativa, consiglierei di cambiare virata:

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

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

In questo modo puoi semplicemente rispedire {{question1.userChoiceId}}al server.

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

Ho provato a cambiare value="true"in ng-value="true", e sembra funzionare.

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

Inoltre, per far funzionare entrambi gli input nel tuo esempio, dovresti assegnare un nome diverso a ciascun input, ad esempio responsedovrebbe diventare response1e response2.

Potresti dare un'occhiata a questo:

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

Questo ragazzo ha scritto una direttiva personalizzata per aggirare il problema che "vero" e "falso" sono stringhe, non booleane.

Il modo in cui le tue radio sono impostate nel violino - condividendo lo stesso modello - farà sì che solo l'ultimo gruppo mostri una radio controllata se decidi di citare tutti i valori di verità. Un approccio più solido prevede di assegnare ai singoli gruppi il proprio modello e di impostare il valore come attributo univoco delle radio, come l'id:

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

Ecco una rappresentazione del nuovo HTML:

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

E un violino.

se si utilizza la variabile booleana per associare il pulsante di opzione. si prega di fare riferimento sotto il codice di esempio

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