带有ng重复的ui.bootstrap.buttons

Question

将ui.bootstrap.buttons转换为ng-重复使用似乎有问题.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重复时，它会中断：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

Answer 2

最后，经过一些测试，我让它使用ng类作为初始选定值，并拥有更改所选按钮的ng单击处理程序。

HTML-按钮的代码：

  <div class="btn-group">
     <button ng-repeat="(timelineIndex, timeline) in timelines" ng-click="selectTimeline(timeline)" ng-class="{active: timeline.name === selectedTimeline.name}" class="btn btn-primary">
        {{timeline.name}}
     </button>
  </div>

在主计长：

  $scope.selectTimeline = function(activeTimeline) {
     $scope.selectedTimeline = activeTimeline;
  };