小编典典

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

all

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


阅读 71

收藏
2022-06-30

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

参考:直接从马嘴里

2022-06-30