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