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

Question

我在将单选按钮绑定到其属性具有布尔值的对象时遇到问题。我正在尝试显示从$ 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

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>

参考：从马口直行