在AngularJS中，如何一次在一個元素上切換一個類？

Question

我在應用程序中有一組元素，我需要用戶一次單擊一個元素並添加一個活動類。

通常，我會執行類似ng-class="{'active':isActive}"並使用ng-click事件在$scope.isActive之間切換true和false。 但是，這通常是針對單個項目執行的。 如果我對一組項目執行此操作，則它將為所有項目添加活動類。

-編輯-

對於更多細節，我有這樣的設置：

<div class="item">
    <button ng-click="setClass()">click</button>
</div>
<div class="item">
    <button ng-click="setClass()">click</button>
</div>
<div class="item">
    <button ng-click="setClass()">click</button>
</div>

我可以使用類似ng-class="{'active':addClass}"但這會觸發所有按鈕具有“ active”類

Answer 1

將每個按鈕綁定到其自己的對象：

<div class="item" ng-class="{active: buttonOne.isActive}" ng-model="buttonOne">
  <button ng-click="setClass()">click</button>
</div>
<div class="item" ng-class="{active: buttonTwo.isActive}" ng-model="buttonTwo">
  <button ng-click="setClass()">click</button>
</div>
<div class="item" ng-class="{active: buttonThree.isActive}" ng-model="buttonThree">
  <button ng-click="setClass()">click</button>
</div>

這將導致它們分別被激活。 這在ng-repeat非常有效，因此，如果它們非常相似，我建議您以這種方式創建按鈕。