AngularJS - 将单选按钮绑定到具有布尔值的模型

Question

我在将单选按钮绑定到属性具有布尔值的对象时遇到问题.我正在尝试显示从$资源中检索到的考试题目.

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

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

参考:直接从马的嘴里

Answer 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}}回服务器了.

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

Answer 4

我试图改变value="true"到ng-value="true",它似乎工作.

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

此外,为了使两个输入在您的示例中起作用,您必须为每个输入指定不同的名称 - 例如response应该变为response1和response2.