我正在尝试使用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
谢谢!
答案 0 :(得分:17)
你的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上的链接
答案 1 :(得分:2)
来自Understanding Scopes angular.js wiki:
对于每个项目/迭代,ng-repeat创建一个新范围,即 原型继承自父范围,但它也分配了 item对新子范围的新属性的值。
如果item是原始(boolean,string,int等),本质上是一个副本 值的值被分配给新的子范围属性。改变了 子范围属性的值不会更改父范围引用的数组。
italic 是我的评论。
但是,当您提供对象时,情况会有所不同,因为在这种情况下,只有对原始对象的引用被分配给子范围而不是副本。
因此,您可以通过将ng-model="radioModel2"
替换为ng-model="data.radioModel2"
来使您的示例工作,并且在您的控制器中不要忘记使用$scope.data = {};
Here是你的掠夺者的工作分叉。