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