angularjs - false - ngmodel radio button angular 4

AngularJS-Botones de radio vinculantes para modelos con valores booleanos

Question

Tengo un problema al enlazar botones de radio con 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 mostrando objetos que no funcionan y que funcionan.

Answer 1

El enfoque correcto en Angularjs es usar ng-value para los valores no de cadena de los modelos.

Modifique su código de esta manera:

<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 de la boca del caballo.

Answer 2

Ese es un enfoque extraño con isUserAnswer . ¿De verdad vas a enviar las tres opciones de vuelta al servidor, donde pasará por cada una de isUserAnswer == true buscando 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, recomiendo cambiar su dirección:

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

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

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

Answer 3

Intenté cambiar value="true" por ng-value="true" , y parece que funciona.

<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 asignar un nombre diferente a cada entrada, por ejemplo, la response debería convertirse en response1 y response2 .

Answer 4

La forma en que se configuran sus radios en el violín (compartir el mismo modelo) hará que solo el último grupo muestre una radio marcada si decide citar todos los valores de verdad. 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.

Answer 5

Podrías 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.

Answer 6

hola espero que te ayude

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

Answer 7

si está utilizando una variable booleana para enlazar el botón de radio. por favor, consulte el código de muestra a continuación

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