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>

当active设置为li时，这会将css类selectedFolder == fold.filter添加到true元素，IF selectedFolder == fold.filter设置为false然后从active元素中删除li类。

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

点击(ng-repeat creates a child scope)后，我们可以切换<a>的值，以便切换selectedFolder css class

这是DEMO

<强>更新

拥有一个..<a ng-click="selectedFolder = !selectedFolder">..元素。

创建一个变量来引用活动元素。（我使用了对象，因为它很容易从active引用，因为ng-repeat创建了一个子范围，所以如果这个变量只是一个原始变量，我们就不能直接调用它的原语我们必须使用{{1因此，很容易使用一个对象来表示它。

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

这是DEMO

Answer 2

使用ng-class

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

角度列表项有效（ng-click）

2 个答案: