[英]angular list item active (ng-click)
So i am trying to add / remove a class from a list item all depending on a variable: (Note if there is a better of doing this active thing please let me know :P )所以我正在尝试根据变量从列表项中添加/删除一个类:(请注意,如果有更好的做这个活动的事情,请告诉我:P)
So my code looks like this:所以我的代码看起来像这样:
<li ng-repeat="fold in folds" class="{{selectedFolder == fold.filter ? 'active' : ''}}">
<a ng-click="selectedFolder = fold.filter">
{{fold.name}}
</a>
</li>
Now when i click the first one the class
is added however once i click the next one the old class
is not replaced by ''
instead now two li
has the class
active
现在,当我单击第一个
class
会添加class
,但是一旦我单击下一个class
,旧class
就不会被''
替换,而是现在两个li
使class
active
Can anyone tell me why?谁能告诉我为什么?
You can use ng-class
您可以使用
ng-class
<li ng-repeat="fold in folds" ng-class="{'active' : selectedFolder == fold.filter}">
.....
</li>
this will add the css class active
to the li
element when selectedFolder == fold.filter
is sets to true
, IF selectedFolder == fold.filter
is sets to false
then active
class is remove from the li
element.当
selectedFolder == fold.filter
设置为true
,这会将 css 类active
添加到li
元素,如果selectedFolder == fold.filter
设置为false
那么active
类将从li
元素中删除。
if you need to toggle the css class add & remove
when clicking, I think you can remove the .. ng-click="selectedFolder = fold.filter"...
part and replace it with ng-click="selectedFolder = !selectedFolder"
and change the ng-class
to ng-class="{'active' : selectedFolder == 1}
and add ng-init="selectedFolder = 0"
to the li
, This will add a variable to ng-repeat
scope so that each repeat has its own selectedFolder
variable in its scope (ng-repeat creates a child scope)
.如果您需要在单击时切换 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)
。
when click in <a>
we can toggle the value of selectedFolder
so that will toggle the css class
..<a ng-click="selectedFolder = !selectedFolder">..
当单击
<a>
时,我们可以切换selectedFolder
的值,以便切换css class
..<a ng-click="selectedFolder = !selectedFolder">..
UPDATE更新
to having one active
element.拥有一个
active
元素。
create a variable to refer the active element.创建一个变量来引用活动元素。 (I used object because its easy to refer from the
ng-repeat
because ng-repeat
creates a child scope, so we cant directly call if this variable is just a primitive variable if its primitive we have to use $parent.variable_name
), So its easy to use a object to represent it. (我使用 object 是因为它很容易从
ng-repeat
引用,因为ng-repeat
创建了一个子作用域,所以我们不能直接调用这个变量是否只是一个原始变量,如果它的原始变量我们必须使用$parent.variable_name
),所以它很容易使用一个对象来表示它。
$scope.active = {
elm : -1
}
when click on <a>
assign the $index
value to active.elm
当单击
<a>
将$index
值分配给active.elm
<a ng-click="active.elm = $index">
..
$index
is the ng-repeat
index just like $index
是ng-repeat
索引,就像
for first repeat $index is equals to 0
for second repeat $index is equals to 1
.. like wise.对于第一次重复
$index is equals to 0
对于第二次重复$index is equals to 1
.. 就像明智的。
change ng-class
to, this will add class active
when active.elm == $index
set to true
.将
ng-class
更改为,当active.elm == $index
设置为true
时,这将添加类active
。
..ng-class="{'active' : active.elm == $index}">
...
use ng-class使用 ng-class
<li ng-repeat="fold in folds" ng-class="{{selectedFolder == fold.filter ? 'active' : ''}}">
<a ng-click="selectedFolder = fold.filter">
{{fold.name}}
</a>
</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.