AngularJS: associa i pulsanti di opzione ai modelli con valori booleani


Answers

Questo è un approccio strano con isUserAnswer . Invierai davvero tutte e tre le scelte al server in cui passerà in isUserAnswer == true ciascuna per isUserAnswer == true ? Se è così, 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, ti consiglio di cambiare la virata:

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

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

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

Question

Ho problemi a collegare pulsanti radio a un oggetto le cui proprietà hanno valori booleani. Sto tentando 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 causa la selezione del pulsante di opzione. Se incapsula 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 considera questa proprietà come un booleano e sarà difficile modificare la serializzazione JSON per incapsulare quei valori tra virgolette. C'è un altro modo per impostare il binding del modello senza modificare la struttura del mio modello?

Ecco il jsFiddle che mostra oggetti non funzionanti e funzionanti




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 implicherà dare ai singoli gruppi il proprio modello e impostare il valore come attributo unico 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.




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

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

Inoltre, per far sì che entrambi gli input funzionino nel tuo esempio, dovresti dare un nome diverso a ciascun input, ad esempio la response dovrebbe diventare response1 e response2 .