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

前端之家收集整理的这篇文章主要介绍了AngularJS – 绑定单选按钮到具有布尔值的模型前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个问题绑定单选按钮到一个对象的属性具有布尔值。我试图显示从$资源检索的考试问题。

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

猜你在找的Angularjs相关文章