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

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

HTML:

  1. <label data-ng-repeat="choice in question.choices">
  2. <input type="radio" name="response" data-ng-model="choice.isUserAnswer" value="true" />
  3. {{choice.text}}
  4. </label>

JS:

  1. $scope.question = {
  2. questionText: "This is a test question.",choices: [{
  3. id: 1,text: "Choice 1",isUserAnswer: false
  4. },{
  5. id: 2,text: "Choice 2",isUserAnswer: true
  6. },{
  7. id: 3,text: "Choice 3",isUserAnswer: false
  8. }]
  9. };

对于此示例对象,“isUserAnswer:true”属性不会导致单选按钮被选中。如果我把布尔值封装在引号中,它工作。

JS:

  1. $scope.question = {
  2. questionText: "This is a test question.",isUserAnswer: "false"
  3. },isUserAnswer: "true"
  4. },isUserAnswer: "false"
  5. }]
  6. };

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

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

Angularjs中的正确方法是对模型的非字符串值使用ng-value。

修改您的代码如下:

  1. <label data-ng-repeat="choice in question.choices">
  2. <input type="radio" name="response" data-ng-model="choice.isUserAnswer" data-ng-value="true" />
  3. {{choice.text}}
  4. </label>

参考:Straight from the horse’s mouth

猜你在找的Angularjs相关文章