AngularJS - Enlace de botones de radio a modelos con valores booleanos

Tengo un problema al vincular botones de radio a un objeto cuyas propiedades tienen valores booleanos. Estoy tratando de mostrar las preguntas del examen recuperadas de un recurso $.

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 este objeto de ejemplo, la propiedad "isUserAnswer: true" no hace que se seleccione el botón de opción. Si encapsulo los valores booleanos entre comillas, funciona.

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

Desafortunadamente, mi servicio REST trata esa propiedad como un valor booleano y será difícil cambiar la serialización JSON para encapsular esos valores entre comillas. ¿Hay otra forma de configurar el enlace del modelo sin cambiar la estructura de mi modelo?

Aquí está el jsFiddle que muestra objetos que no funcionan y que funcionan

El enfoque correcto en Angularjs es usar ng-valuepara valores sin cadena de modelos.

Modifique su código así:

<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: Directamente desde la boca del caballo.

Ese es un enfoque extraño con isUserAnswer. ¿Realmente vas a enviar las tres opciones de vuelta al servidor, donde recorrerá cada una de ellas isUserAnswer == true? Si es así, puedes probar esto:

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

Alternativamente, recomendaría cambiar su táctica:

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

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

De esa manera, puede enviar de {{question1.userChoiceId}}vuelta al servidor.

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

Traté de cambiar value="true"a ng-value="true", y parece funcionar.

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

Además, para que ambas entradas funcionen en su ejemplo, tendría que dar un nombre diferente a cada entrada, por ejemplo, responsedebería convertirse en response1y response2.

Puedes echar un vistazo a esto:

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

Este tipo escribió una directiva personalizada para solucionar el problema de que "verdadero" y "falso" son cadenas, no booleanos.

La forma en que se configuran sus radios en el violín, compartiendo el mismo modelo, hará que solo el último grupo muestre una radio marcada si decide citar todos los valores verdaderos. Un enfoque más sólido implicará dar a los grupos individuales su propio modelo y establecer el valor como un atributo único de las radios, como el id:

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

Aquí hay una representación del nuevo html:

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

Y un violín.

si está usando una variable booleana para enlazar el botón de radio. por favor refiérase debajo del código de muestra

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