AngularJS - 带有单选按钮和布尔值的 Ng-repeat答案

【问题标题】：AngularJS - Ng-repeat with radio buttons and boolean valueAngularJS - 带有单选按钮和布尔值的 Ng-repeat
【发布时间】：2016-02-10 03:47:56
【问题描述】：

我有一个Book-对象数组，每个对象都有boolean 属性Favorite。只有一本书的收藏夹设置为true。

我正在使用ng-repeat 显示这些书籍，并且我希望能够使用单选按钮设置最喜欢的书籍。但是，即使在页面加载时选择了正确的单选按钮，当我选择不同的单选按钮时，模型也不会更新布尔值。

这是我的代码：

<ul>
    <li ng-repeat="book in vm.Books">
        {{book.Name}}
        <input name="book" type="radio" ng-model="book.Favorite" ng-value="book.Favorite" /> 
    </li>
<ul>

如何根据选中的单选按钮使用正确的Favorite-值更新模型？

【问题讨论】：

为什么值和模型都指向同一个变量？这样，您总是将 book 对象中的值设置为该对象具有的值，所以这可能就是为什么...
删除 name="book"，因为它不需要。 ng-value="{{expression}}" 不应该是模型中的动态值，而是一些固定的唯一值，例如 book.uniqueId
@DarrylMiles 但是如果我删除name，它允许我选中多个单选框？
FWIW 你会期望最喜欢的模型概念在book 对象本身之外。 ng-model="somethingelse.favorite" ng-value="book" 然后在使用存储加载/存储期间在控制器中修复（转换为 ID）。
docs.angularjs.org/api/ng/input/input%5Bradio%5D 至少在 FF 上没有这个问题（设置了多个单选按钮）。可能是因为使用了绑定在<form> 上的控制器？

标签： angularjs radio-button angularjs-ng-repeat

【解决方案1】：

以下内容很接近，但当您选择另一个时不会将book.Favorite 设置为false（我假设您想要？）：

<li ng-repeat="book in vm.Books">
  {{book.Name}}
  <input name="book" type="radio" ng-model="book.Favorite" ng-value="true">
</li>

我宁愿走这条路：

<li ng-repeat="book in vm.Books">
  {{book.Name}}
  <input type="radio" ng-click="vm.setFavorite(book)" ng-checked="book.Favorite">
</li>

还有：

vm.setFavorite = function(book) {

  vm.Books.forEach(function(b) {
    b.Favorite = book === b;
  });
};

演示： http://plnkr.co/edit/UKGQW1dd8M5UiEbUCxWd?p=preview

【讨论】：