带有ng-repeat的ui.bootstrap.buttons

Question

将ui.bootstrap.buttons转换为与ng-repeat一起使用似乎存在问题.ui.bootstrap.buttons示例和文档在这里:http://angular-ui.github.io/bootstrap/

基本上,默认示例很有效:http://plnkr.co/edit/2O81y57GtfP6EPNH9qYa？p = preview

<div class="btn-group">
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>

但当它转换为使用ng-repeat时,它就会破坏:http://plnkr.co/edit/nzx1VTGN4Q59JlFCU53V？p = preview

<div class="btn-group">
    <label ng-repeat="test in ['Left', 'Middle', 'Right']" class="btn btn-primary" ng-model="radioModel" btn-radio="'{{test}}'">{{test}}</label>
</div>

Answer 1

尝试

<label ng-repeat="test in ['Left', 'Middle', 'Right']" btn-radio="test" class="btn btn-primary" ng-model="radio.model">

代替

btn-radio="'{{test}}'"

最重要的ng-repeat是创建一个新的范围,因此您也需要考虑到这一点.这是一个有效的插件:http://plnkr.co/edit/h5e5OgFCqv28MPy4tEaM? p= preview