Question

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

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

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

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

参考：Straight from the horse's mouth

Answer 2

isUserAnswer这是一个奇怪的方法。你是否真的要将所有三个选择发送回服务器，在那里它将遍历检查isUserAnswer == true的每个选项？如果是这样，你可以试试这个：

http://jsfiddle.net/hgxjv/4/

HTML：

<input type="radio" name="response" value="true" ng-click="setChoiceForQuestion(question1, choice)"/>

JavaScript的：

$scope.setChoiceForQuestion = function (q, c) {
    angular.forEach(q.choices, function (c) {
        c.isUserAnswer = false;
    });

    c.isUserAnswer = true;
};

或者，我建议改变你的方法：

http://jsfiddle.net/hgxjv/5/

<input type="radio" name="response" value="{{choice.id}}" ng-model="question1.userChoiceId"/>

这样您就可以将{{question1.userChoiceId}}发送回服务器。

Answer 3

 <label class="rate-hit">
     <input type="radio" ng-model="st.result" ng-value="true" ng-checked="st.result">
     Hit
 </label>
 &nbsp;&nbsp;
 <label class="rate-miss">
     <input type="radio" ng-model="st.result" ng-value="false" ng-checked="!st.result">
     Miss
 </label>

Answer 4

我尝试将value="true"更改为ng-value="true"，似乎有效。

<input type="radio" name="response2" data-ng-model="choice.isUserAnswer" ng-value="true" />

此外，为了让两个输入在您的示例中起作用，您必须为每个输入指定不同的名称 - 例如response应该变为response1和response2。

Answer 5

你可以看看这个：

https://github.com/michaelmoussa/ng-boolean-radio/

这家伙写了一个自定义指令来解决“真”和“假”是字符串而不是布尔值的问题。

Answer 6

您的收音机在小提琴中的设置方式 - 共享相同的模型 - 如果您决定引用所有的真实值，将仅导致最后一组显示已检查的收音机。更加可靠的方法是为各个组提供自己的模型，并将值设置为无线电的唯一属性，例如id：

$scope.radioMod = 1;
$scope.radioMod2 = 2;

以下是新html的表示形式：

<label data-ng-repeat="choice2 in question2.choices">
            <input type="radio" name="response2" data-ng-model="radioMod2" value="{{choice2.id}}"/>
                {{choice2.text}}
        </label>

And a fiddle.

Answer 7

如果您使用布尔变量来绑定单选按钮。请参考下面的示例代码

foreach($amount as $key => $values)
    {
        if ( $key < count( $amount ) - 1 ) {
            print_r($values);
            echo"<br>";
        }
    }

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

7 个答案: