javascript - Angular 列表项处于事件状态(ng-click)

Question

所以我正在尝试根据变量从列表项中添加/删除类:(请注意，如果有更好的做法，请告诉我:P)

所以我的代码是这样的:

<li ng-repeat="fold in folds" class="{{selectedFolder == fold.filter ?  'active' : ''}}">
    <a ng-click="selectedFolder = fold.filter">
        {{fold.name}}
    </a>
</li>

现在，当我点击第一个时，class 被添加，但是一旦我点击下一个，旧的 class 就不会被 '' 而不是现在两个 li 有 class active

谁能告诉我为什么？

Answer 1

您可以使用 ng-class

<li ng-repeat="fold in folds" ng-class="{'active' :  selectedFolder == fold.filter}">
    .....
</li>

这将添加 css 类 active到 li selectedFolder == fold.filter 时的元素设置为 true , 如果 selectedFolder == fold.filter设置为 false然后active类已从 li 中删除元素。

如果你需要切换CSS类add & remove单击时，我认为您可以删除 .. ng-click="selectedFolder = fold.filter"...部分并将其替换为 ng-click="selectedFolder = !selectedFolder"并更改 ng-class至 ng-class="{'active' : selectedFolder == 1}并添加 ng-init="selectedFolder = 0"到 li , 这将向 ng-repeat 添加一个变量范围，以便每个重复都有自己的 selectedFolder范围内的变量 (ng-repeat creates a child scope) .

当点击<a>我们可以切换 selectedFolder 的值这样就会切换 css class ..<a ng-click="selectedFolder = !selectedFolder">..

这里是 DEMO

更新

拥有一个active元素。

创建一个变量来引用事件元素。 (我使用对象是因为它很容易从 ng-repeat 中引用，因为 ng-repeat 创建了一个子作用域，所以我们不能直接调用如果这个变量只是一个原始变量，如果它的原始变量我们必须使用 $parent.variable_name )，所以它易于使用对象来表示它。

 $scope.active = {
    elm : -1
 }

当点击 <a> 时分配 $index值 active.elm

<a ng-click="active.elm = $index">
..

$index是ng-repeat索引就像

第一次重复$index is equals to 0 第二次重复 $index is equals to 1 .. 像聪明人一样。

更改ng-class到，这将添加类 active什么时候active.elm == $index设置为 true .

..ng-class="{'active' :  active.elm == $index}">
...

这里是 DEMO