AngularJS -- 仅对一个元素切换 class（ng-class 和 ng-click）

Question

我尝试一次将 class 应用于一个元素 (see this plunk)。

HTML:

<ul>
  <li ng-repeat="item in listItems">
    <a ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">L</a>
    <a ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">R</a>
    <a ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">J</a>
  </li>
</ul>

JS:

var app = angular.module("testApp", []);

app.controller("MainController", function($scope) {
  $scope.listItems = [{description: 'item1', number: 1}];
});

现在，当我单击此列表中的一个元素时，class 切换将应用于所有元素。

我希望能够单击和取消单击每个字母以单独切换 class 更改。我该怎么做？

Answer 1

你需要为 ng-class 使用三个变量，使用一个将到处反映

<a ng-class="{'userActive': isActiveL, 'userInactive': !isActiveL}" ng-click="isActiveL = !isActiveL">L</a>
<a ng-class="{'userActive': isActiveR, 'userInactive': !isActiveR}" ng-click="isActiveR = !isActiveR">R</a>
<a ng-class="{'userActive': isActiveJ, 'userInactive': !isActiveJ}" ng-click="isActiveJ = !isActiveJ">J</a>

如果你只想使用一个变量

<a ng-class="{'userActive': isActive==1, 'userInactive': isActive!=1}" ng-click="isActive=1">L</a>
<a ng-class="{'userActive': isActive==2, 'userInactive': isActive!=2}" ng-click="isActive=2">R</a>
<a ng-class="{'userActive': isActive==3, 'userInactive': isActive!=3}" ng-click="isActive=3">J</a>

Answer 2

困难在于，在您的情况下，所有列表元素都共享相同的范围，因此当您设置 isActive 时，无法区分哪个元素实际上应该处于活动状态。

对我来说，简单的解决方案是隔离每个项目的范围。也许这不是最好的解决方案，但在非常小的指令的帮助下非常简单：

    <ul>
        <li ng-repeat="item in listItems">
            <a isolate ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">L</a>
            <a isolate ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">R</a>
            <a isolate ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">J</a>
        </li>
    </ul>

其中 isolate 指令定义为：

app.directive('isolate', function() {
    return {scope: true};
});

Answer 3

也许是这样：

<ul>
    <li ng-repeat="item in listItems">
        <a ng-class="item.isActive ? 'userActive' : 'userInactive'" ng-click="item.isActive = !item.isActive">{{item.name}}</a>
    </li>
</ul>

AngularJS -- 仅对一个元素切换 class（ng-class 和 ng-click）

AngularJS -- Toggle class for only one element (ng-class and ng-click)

javascript

angularjs

angularjs-ng-click

ng-class