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>

Ссылка: прямо изо рта лошади

Это странный подход с 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» являются строками, а не логическими значениями.

То, как ваши радиостанции настроены в скрипке - совместно используют одну и ту же модель - заставит только последнюю группу показывать проверенное радио, если вы решите процитировать все истинные значения. Более надежный подход будет предусматривать предоставление отдельным группам их собственной модели и задание значения в качестве уникального атрибута радиостанций, например 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>