AngularJS -- 只为一个元素切换类(ng-class 和 ng-click) [英] AngularJS -- Toggle class for only one element (ng-class and ng-click)

问题描述

我试图一次只将一个类应用于一个元素(看到这个 plunk).

I'm trying to apply a class to only one element at a time (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}];
});

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

Right now, when I click an element in this list, the class toggle is applied to all elements.

我希望能够单击和取消单击每个字母来单独切换类更改.我该怎么做?

I want to be able to click and unclick each letter to toggle the class change individually. How can I do this?

推荐答案

难点在于在你的情况下所有列表元素共享相同的作用域，所以当你设置 isActive 时，没有办法区分哪个实际上应该是活跃的.

The difficulty is that in your case all list elements share the same scope, so when you set isActive there is no way to distinguish which one is actually should be active.

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

The simple solution to me is to isolate scope for every item. Maybe this is not nicest solution, but pretty simple with the help of very tiny directive:

    <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};
});

这篇关于AngularJS -- 只为一个元素切换类(ng-class 和 ng-click)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！