AngularJS – 将单选button绑定到带有布尔值的模型

我有一个绑定单选button的属性具有布尔值的对象的问题。 我正在尝试显示从$资源检索到的考题。

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”属性不会导致单选button被选中。 如果我用引号封装布尔值，它的工作原理。

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

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

Answer 1

Angularjs中的正确方法是对模型的非string值使用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> 

参考： 直接从马的嘴里

Answer 2

用isUserAnswer这是一个奇怪的方法。 你真的要发送所有三个select回到服务器，它将循环通过每一个检查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; }; 

另外，我build议改变你的方式：

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

另外，为了使你的例子中的两个input都起作用，你必须给每个input赋予不同的名字 – 例如response应该成为response1和response2 。

Answer 5

你可以看看这个：

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

这个人写了一个自定义指令，以解决“真”和“假”是string，而不是布尔值的问题。

Answer 6

你的收音机设置在小提琴的方式 – 共享相同的模型 – 只会导致最后一组显示检查收音机，如果你决定引用所有的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> 

和小提琴。