ng-repeat中的UI Bootstrap单选按钮

时间:2014-12-24 12:36:48

标签: javascript angularjs angular-ui-bootstrap

我正在尝试使用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

谢谢!

2 个答案:

答案 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上的链接

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

答案 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是你的掠夺者的工作分叉。