web-dev-qa-db-fra.com

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

J'ai un problème de liaison des boutons radio à un objet dont les propriétés ont des valeurs booléennes. J'essaie d'afficher les questions d'examen extraites 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 d'option. 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 considère 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 un autre moyen de configurer la liaison de modèle sans modifier la structure de mon modèle?

Voici le jsFiddle montrant les objets non-travaillants et les objets travaillants

angularjsdata-bindingmodelradio
195
peteallen

La bonne approche dans Angularjs consiste à utiliser ng-value pour les valeurs de modèles autres que des chaînes.

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

369
kumarharsh

C'est une approche étrange avec isUserAnswer. Allez-vous vraiment renvoyer les trois choix au serveur où il va parcourir chacun d'eux en vérifiant 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 vous recommande de changer votre tactique:

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.

20
Langdon
 <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>
10
Ronel Gonzales

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 attribuer un nom différent à chaque entrée, par exemple. response devrait devenir response1 et response2.

7
seung

Vous pourriez jeter un coup d'oeil à ceci:

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

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

1
Karen Zilles

La manière dont vos radios sont configurées dans le violon - partageant le même modèle - fera en sorte que seul le dernier groupe affiche une radio cochée si vous décidez de citer toutes les valeurs de vérité. 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, tel que l'id:

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

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

0
rGil

si vous utilisez une variable booléenne pour lier le bouton radio. s'il vous plaît se référer ci-dessous exemple de code

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