AngularJS - Relier les boutons radio aux modèles avec des valeurs booléennes

Question

Je vais avoir un problème de liaison radio boutons pour un objet dont les propriétés ont des valeurs booléennes. J'essaie d'afficher les questions de l'examen (extrait d'un montant de ressources.

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

Avec cet exemple, l'objet, le "isUserAnswer: true" propriété n'entraîne pas le bouton radio pour être sélectionné. Si je encapsuler les valeurs booléennes entre guillemets, il fonctionne.

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

Malheureusement, mon REPOS de service prévoit que les biens d'un booléen, et il sera difficile de changer la sérialisation JSON pour encapsuler ces valeurs entre guillemets. Est-il une autre façon de mettre en place le modèle de la liaison sans modifier la structure de mon modèle?

Voici le jsFiddle à montrer la non-travail et travail des objets

Answer 1

La méthode correcte dans Angularjs consiste à utiliser ng-value pour les valeurs non-chaîne des modèles.

Modifiez votre code comme ceci:

 <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: Directement de la bouche du cheval

Answer 2

C'est une drôle de démarche avec isUserAnswer. Allez-vous vraiment envoyer tous les trois choix vers le serveur où il sera en boucle au travers de chacune de vérification pour l' isUserAnswer == true? Si oui, vous pouvez essayer ceci:

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

Sinon, je vous recommande de changer votre point d'amure:

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

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

De cette façon, vous pouvez simplement envoyer {{question1.userChoiceId}} sur le serveur.

Answer 3

J'ai essayé de changer value="true" en ng-value="true" , et cela semble fonctionner.

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

De plus, pour que les deux entrées fonctionnent dans votre exemple, vous devez donner un nom différent à chaque entrée - par exemple response devrait devenir response1 et response2 .

Answer 4

Vous pourriez jeter un oeil à ceci:

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

Ce gars a écrit une directive personnalisée pour contourner le problème que "true" et "false" sont des chaînes, pas des booléens.

Answer 5

La façon dont vos radios sont mis en place dans le violon, partage le même modèle - seulement le dernier groupe d'afficher un contrôle de la radio si vous décidez de citer tous les truthy valeurs. Un plus solide approche impliquent les différents groupes, leur propre modèle, et de définir la valeur d'un attribut unique, des radios, telles que l'id:

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

Voici une représentation de la nouvelle html:

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

Et un violon.