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

Answer 2

最后经过一些测试我得到了它使用ng-class作为初始选择值和自己的ng-click处理程序，它改变了所选按钮

按钮的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;
  };

带有ng-repeat的ui.bootstrap.buttons

2 个答案: