AngularJS - привязка переключателей к моделям с булевыми значениями

У меня проблема с привязкой переключателей к объекту, свойства которого имеют логические значения. Я пытаюсь отобразить вопросы экзамена, полученные из $resource.

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 показывает неработающие и рабочие объекты

Ответ 1

Правильный подход в 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>

Ссылка: Прямо от устья лошади

Ответ 2

Это нечетный подход с 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}} обратно на сервер.

Ответ 3

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

Ответ 4

Я попытался изменить value="true" на ng-value="true", и, похоже, он работает.

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

Кроме того, чтобы оба входа работали в вашем примере, вам нужно было бы указать другое имя для каждого входа - например. response должен стать response1 и response2.

Ответ 5

Вы можете взглянуть на это:

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

Этот парень написал специальную директиву, чтобы обойти проблему: "true" и "false" - это строки, а не booleans.

Ответ 6

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

И скрипка.

Ответ 7

если вы используете логическую переменную для привязки переключателя. пожалуйста, обратитесь ниже пример кода

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