AngularJS - прив'язка радіо кнопок до моделей із булевими значеннями

У мене виникають проблеми з прив'язкою радіо кнопок до об'єкта, властивості якого мають булеві значення. Я намагаюся відобразити екзаменаційні запитання, отримані з $-ресурсу.

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

У цьому прикладі об'єкта властивість "isUserAnswer: true" не призводить до вибору перемикача. Якщо я інкапсулюю булеві значення в лапки, це працює.

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

На жаль, моя служба REST трактує цю властивість як булеву, і буде складно змінити серіалізацію JSON на інкапсуляцію цих значень у лапки. Чи є інший спосіб встановити прив'язку моделі без зміни структури моєї моделі?

Ось jsFiddle, що показує непрацюючі та робочі об’єкти

Правильний підхід у Angularjs - це використовувати ng-value для значень моделей.

Змініть код так:

<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: Прямо з уст коня

Це дивний підхід isUserAnswer. Ви дійсно збираєтеся відправити всі три варіанти назад на сервер, де він буде проходити цикл через кожну перевірку isUserAnswer == true? Якщо так, ви можете спробувати це:

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

Інакше я рекомендую змінити тек:

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

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

Таким чином ви можете просто відправити {{question1.userChoiceId}}назад на сервер.

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

Я спробував перейти value="true"на ng-value="true", і, здається, працює.

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

Крім того, щоб обидва входи працювали у вашому прикладі, вам слід було б вказати різні назви кожному вводу - наприклад, responseслід стати response1і response2.

Ви можете поглянути на це:

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

Цей хлопець написав власну директиву, щоб обійти питання про те, що "true" і "false" - це рядки, а не булеві.

Те, як ваші радіостанції налаштовані у скрипці - спільно використовуючи ту саму модель - призведе до того, що лише остання група відобразить перевірене радіо, якщо ви вирішите цитувати всі значення "truthy". Більш грунтовний підхід передбачає надання окремим групам власної моделі та встановлення значення як унікального атрибуту радіостанцій, наприклад id:

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

Ось подання нового html:

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

І скрипка.

якщо ви використовуєте булеву змінну для прив'язки перемикача. зверніться нижче до зразкового коду

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