Question

我在应用中有一组元素，我需要用户一次点击一个并添加一个活动的类。

通常情况下，我会执行类似ng-class="{'active':isActive}"的操作并使用ng-click事件在{true}之间切换$scope.isActive。但是，我通常会针对单个项目执行此操作。如果我针对组项目执行此操作，那么它将为所有组件添加活动类。

- 编辑 -

更多细节我有这样的设置：

<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}"这样的东西，但这会触发所有按钮，让＃34;活跃＆＃34;类

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中非常有效，因此我建议您按照这种方式创建按钮，如果它们非常相似的话。

在AngularJS中，如何一次在一个元素上切换类？

1 个答案: