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

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

HTML:

对于这个示例对象，“isUserAnswer:true”属性不会导致选择单选按钮。如果我将布尔值封装在引号中，它就会起作用

JS:

不幸的是，我的REST服务将该属性视为布尔值，很难更改JSON序列化以将这些值封装在引号中。是否有其他方法可以在不更改模型结构的情况下设置模型绑定

---

对于

isUserAnswer

，这是一种奇怪的方法。您真的要将这三个选项发送回服务器，在服务器上它将循环检查每一个选项，以检查

isUserAnswer==true

？如果是，您可以尝试以下方法：

HTML:

或者，我建议您改变策略：

---

这样，您就可以将

{{question1.userChoiceId}}

发送回服务器。

如果您决定引用所有truthy值，那么您在小提琴中设置收音机的方式（共享同一型号）将只导致最后一组显示选中的收音机。更可靠的方法包括为各个组提供其自己的模型，并将值设置为收音机的唯一属性，例如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>

{{choice2.text}

---

您可以看看这个：

---

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

我试着将

value=“true”

改为

ng value=“true”

，似乎奏效了

---

此外，要使两个输入在您的示例中都起作用，您必须为每个输入指定不同的名称——例如，

response

应成为

response1

和

response2

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>

{{choice.text}

参考：

打
错过

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

<div ng-repeat="book in books"> 
<input type="radio" ng-checked="book.selected"  
ng-click="function($event)">                        
</div>

感谢您的回复。我知道你的第二个解决方案是理想的；然而，该应用程序实际上支持多种类型的问题，包括“检查所有适用的”问题——因此在每个选项上存储值的原因。据我所知，您的第一个解决方案适用于在做出选择后更新模型，但不适用于显示从服务器检索到的已做出选择的模型。啊，是的。您可以通过使用

ngChecked

来解决这个问题，除非您必须放弃使用true/false作为字符串。你能做到吗？是的，很有效！我以前尝试过使用ngChecked，但没有删除ngModel属性。它不适用于这种配置，我认为这是因为ngChecked与单选按钮不兼容。删除ngModel属性，使用ngChecked并将ngClick绑定到setChoiceForQuestion函数，就可以实现我的目的。谢谢你的帮助！不，名称可以相同。只想添加一个重要的补充说明：ng值必须具有不带大括号的值{{}示例：ng value=“choice2.id”vs value=“{{choice2.id}”是的，这是正确的，因为ng值是在其中计算的scope@Andi谢谢你的旁注，它节省了我调试的时间！你是指我认为的数据前缀。。。数据前缀是为了使HTML有效（尽管没有数据前缀，所有现代浏览器也能正确处理HTML），我知道这篇文章很老了，但我现在遇到了同样的问题。但是，当我使用您的解决方案并更改单选按钮时，所有曾经选中的都是真的，并且不会切换回假。有解决办法吗？（OP的小提琴中也存在问题）我认为这只适用于

true

计算结果为true的情况。例如，如果您的

ng值

是一个字符串，而不是对

$scope

中某个内容的引用，则必须将该字符串放在引号中。对我来说就是这样。这对我来说是最好的答案！谢谢你，罗内尔！只要定义了ng模型，这里就不需要选中ng

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

    c.isUserAnswer = true;
};

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

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

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

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

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

<div ng-repeat="book in books"> 
<input type="radio" ng-checked="book.selected"  
ng-click="function($event)">                        
</div>