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

发布时间：2020-12-17 09:23:07 所属栏目：安全来源：网络整理

导读：我有一个问题绑定单选按钮到一个对象的属性具有布尔值。我试图显示从$资源检索的考试问题。 HTML： label data-ng-repeat="choice in question.choices" input type="radio" name="response" data-ng-model="choice.isUserAnswer" value="true" / {{choice.t

我有一个问题绑定单选按钮到一个对象的属性具有布尔值。我试图显示从$资源检索的考试问题。

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.",isUserAnswer: "false"
        },isUserAnswer: "true"
        },isUserAnswer: "false"
        }]
};

不幸的是，我的REST服务将该属性视为布尔值，并且很难更改JSON序列化以将这些值封装在引号中。有没有另一种方式来设置模型绑定，而不改变我的模型的结构？

Here’s the jsFiddle showing non-working and working objects

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>

参考：Straight from the horse’s mouth

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!