2

Angular-UI と Bootstrap 3 を使用しています。

この HTML をスコープに接続しています (スコープに $scope.myBtn = "A" があるとします)。

<button type="button" class="btn btn-primary" ng-model="myBtn" btn-radio="A">A</button>
<button type="button" class="btn btn-primary" ng-model="myBtn" btn-radio="B">B</button>
<button type="button" class="btn btn-primary" ng-model="myBtn" btn-radio="C">C</button>

これにより、3 つの青いボタンが生成されます。これが私が望むものです。ボタンの 1 つがクリックされると、$scope.myBtn 値が適切な値 (「B」など) に設定され、そのボタンのクラスが次のように設定されます。

<button type="button"
  class="btn btn-primary active" ng-model="myBtn" btn-radio="B">B</button>

(クラスにactiveが追加されていることに注意してください)。

1 つのボタンがアクティブなときに、「btn-primary」クラスを削除して「btn-success」クラスを追加したいと考えています。私はこの方法でそれを行うことができることを知っています(そして、それは私が現在実際に使用しているものです):

<button
  type      = "button"
  class     = "btn"
  ng-class  = "{
    'btn-primary': myBtn != 'B',
    'btn-success': myBtn == 'B'
  }"
  ng-model  = "myBtn"
  btn-radio = "'B'">B</button>

しかし、それはすべてのボタンに対して非常に冗長に思えます...これを行うためのより良い方法はありますか?

4

1 に答える 1