AngularJS UI Bootstrap“btn-radio”指令不起作用

时间:2013-08-16 14:30:44

标签: angularjs angularjs-directive angular-ui-bootstrap

Live Demo

有人可以解释为什么前两个按钮组有效,但第三个按钮组不起作用吗?

<div class="btn-group">
  <button ng-repeat="company in companies" 
          class="btn" 
          ng-model="radioModel.id" 
          btn-radio="company.id">
    {{company.name}}
  </button>
</div>

<div class="btn-group">
  <button class="btn btn-two" 
          ng-model="radioModel.id"
          btn-radio="2">
    two
  </button>
  <button class="btn btn-two" 
          ng-model="radioModel.id"
          btn-radio="3">
    three
  </button>
</div>

<div class="btn-group">
  <button ng-repeat="company in companies" 
          class="btn btn-{{ company.name }}" 
          ng-model="radioModel.id" 
          btn-radio="company.id">
    {{company.name}}
  </button>
</div>
$scope.companies = [ { id: 2, name: "two"}, {id: 3, name: "three"} ];
$scope.radioModel = { id: 3 };

此示例使用AngularUI Bootstrap 0.5.0。如果我将其更改为0.3.0,一切都按预期工作。

1 个答案:

答案 0 :(得分:7)

使用ng-classclass中的字符串插值很时髦。

ng-class="'btn btn-' + company.name"