angularjs - AngularJS UI ブートストラップの「btn-radio」ディレクティブが機能しない

Question

ライブデモ

最初の 2 つのボタン グループが機能するのに、3 つ目のボタン グループが機能しない理由を誰か説明できますか?

<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 に変更すると、すべてが期待どおりに機能します。

Answer 1

を使用しng-classます。の文字列補間classはファンキーです。

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