angular list item active（ng-click）

所以我想从一个列表项中添加/删除一个类，全部取决于一个变量:(注意如果有更好的做这个活动的东西请让我知道：P ）angular list item active（ng-click）

所以我的代码如下所示：

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

现在，当我点击第一个不过class加一次我点击下一个老class没有被''替换，而不是现在二人li有classactive

有谁能告诉我为什么？

来源

2015-10-21 Marc Rasmussen

删除'class'，加上'纳克级= “{ '主动'：selectedFolder == fold.filter}”' –

您可以使用ng-class

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

这将在selectedFolder == fold.filter是套的CSS类active添加到li元素true，IF 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

UPDATE

具有一个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

来源

2015-10-21 12:22:53

喂你反应感谢，但有没有方式只允许1有“积极”类？在你的例子中，我得到了同样的结果，因为我现在允许多个列表项被激活 –

:)更新请看看。 –

最后的更新非常出色。 –

使用纳克级

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

来源

2015-10-21 12:19:40

angular list item active（ng-click）

回答

相关问题