AngularJS - 将单选按钮绑定到具有布尔值的模型 [英] AngularJS - Binding radio buttons to models with boolean values

问题描述

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

I am having a problem binding radio buttons to an object whose properties have boolean values. I am trying to display exam questions retrieved from a $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属性不会导致单选按钮被选中。如果我将布尔值封装在引号中，它可以工作。

With this example object, the "isUserAnswer: true" property does not cause the radio button to be selected. If I encapsulate the boolean values in quotes, it works.

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序列化更改为将这些值封装在引号中。是否有另一种方式设置模型绑定而不改变我的模型的结构？

Unfortunately my REST service treats that property as a boolean and it will be difficult to change the JSON serialization to encapsulate those values in quotes. Is there another way to set up the model binding without changing the structure of my model?

这里是显示非工作和工作对象的jsFiddle

推荐答案

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

The correct approach in Angularjs is to use ng-value for non-string values of models.

修改代码如下：

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

参考：从马的嘴直接

这篇关于AngularJS - 将单选按钮绑定到具有布尔值的模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！