Angular列表项激活(ng-click)

angular list item active (ng-click)

本文关键字：ng-click 激活 列表 Angular      更新时间：2023-09-26

所以我试图从列表项中添加/删除一个类，全部取决于一个变量:(注意，如果有更好的做这个活跃的事情，请让我知道: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

谁能告诉我为什么?

您可以使用ng-class 

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

当selectedFolder == fold.filter设置为true时，将active添加到li元素中，如果selectedFolder == fold.filter设置为false，则从li元素中删除active类。

如果您需要在单击时切换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.elm == $index设置为true时，将添加active类。

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

这里是DEMO

使用

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