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

J'ai un problème pour lier les boutons radio à un objet dont les propriétés ont des valeurs booléennes. J'essaie d'afficher les questions d'examen récupérées à partir d'une ressource $.

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 d'objet, la propriété "isUserAnswer: true" n'entraîne pas la sélection du bouton radio. Si j'encapsule les valeurs booléennes entre guillemets, cela 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 service REST traite cette propriété comme un booléen et il sera difficile de modifier la sérialisation JSON pour encapsuler ces valeurs entre guillemets. Existe-t-il une autre façon de configurer la liaison de modèle sans modifier la structure de mon modèle?

Voici le jsFiddle montrant les objets qui ne fonctionnent pas et qui fonctionnent

L'approche correcte dans Angularjs est à utiliser ng-valuepour les valeurs non-string 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>

Réf: Directement de la bouche du cheval

C'est une étrange approche avec isUserAnswer. Allez-vous vraiment renvoyer les trois choix au serveur où il passera en revue chacun d'eux pour vérifier 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;
};

Alternativement, je recommanderais de changer votre virement:

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

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

De cette façon, vous pouvez simplement renvoyer {{question1.userChoiceId}}au serveur.

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

J'ai essayé de changer value="true"pour 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, responsedevrait devenir response1et response2.

Vous pourriez jeter un œil à ceci:

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

Ce type a écrit une directive personnalisée pour contourner le problème selon lequel "vrai" et "faux" sont des chaînes, pas des booléens.

La façon dont vos radios sont configurées dans le violon - partageant le même modèle - fera que seul le dernier groupe affichera une radio vérifiée si vous décidez de citer toutes les valeurs véridiques. Une approche plus solide impliquera de donner aux groupes individuels leur propre modèle et de définir la valeur comme un attribut unique des radios, comme l'id:

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

Voici une représentation du nouveau 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.

si vous utilisez une variable booléenne pour lier le bouton radio. veuillez vous référer à l'exemple de code ci-dessous

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