Question

我正在尝试使用ui bootstrap（http://angular-ui.github.io/bootstrap/）创建一组单选按钮，与他们网站上的示例非常相似，但使用ng-repeat：

<div class="btn-group">
    <label ng-repeat='option in options' class="btn btn-danger" ng-model="radioModel2" btn-radio="'{{option}}'" uncheckable>{{option}}</label>
</div>

但由于某种原因，当我使用ng-repeat时它不起作用。谁知道为什么？

我已成为一名说明问题的人：http://plnkr.co/edit/0sDgKoRhHOgfnIvBPmi4?p=preview

谢谢！

Answer 1

你的ng模型犯了一点错误。当您要在无线电按钮中传递它并在模型中重复时，您可以像

一样使用它

<div class="btn-group">
    <label ng-repeat='option in options' class="btn btn-danger" ng-model="$parent.radioModel2" btn-radio="'{{option}}'" uncheckable>{{option}}</label>
</div>

试试这个。

检查plnkr上的链接

http://plnkr.co/edit/m24ZcYuttw6IuCBh02rQ?p=preview

Answer 2

来自Understanding Scopes angular.js wiki：

对于每个项目/迭代，ng-repeat创建一个新范围，即   原型继承自父范围，但它也分配了   item对新子范围的新属性的值。

如果item是原始（boolean，string，int等），本质上是一个副本   值的值被分配给新的子范围属性。改变了   子范围属性的值不会更改父范围引用的数组。

italic 是我的评论。

但是，当您提供对象时，情况会有所不同，因为在这种情况下，只有对原始对象的引用被分配给子范围而不是副本。

因此，您可以通过将ng-model="radioModel2"替换为ng-model="data.radioModel2"来使您的示例工作，并且在您的控制器中不要忘记使用$scope.data = {};

创建对象

Here是你的掠夺者的工作分叉。

ng-repeat中的UI Bootstrap单选按钮

2 个答案: