AngularJS - 切换为只有一个元素（NG-Class和NG-点击）班 [英] AngularJS -- Toggle class for only one element (ng-class and ng-click)

问题描述

我试图在同一时间的一类适用于只有一个元素（看这普拉克）。

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.

简单的解决方案，我是为每一个项目分离范围。也许这是最好的不是解决办法，但pretty简单的用非常小的指令的帮助：

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>

其中，隔离指令的定义是：

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

这篇关于AngularJS - 切换为只有一个元素（NG-Class和NG-点击）班的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！