我有以下code:
<李班=parentElement> < UL> <李班=亮点>< A HREF =>项目1 LT; / A>< /李> <立GT;< A HREF =>项目2'; / A>< /李> <立GT;< A HREF =>项目3'; / A>< /李> < / UL>< /李>
< UL>
这里是导航菜单下拉。有源元件/ <立GT;
有一流的亮点...我需要添加类主动到parentElement上课时的亮点是在列表中的元素之一。
我试图用纳克级,但没有成功。
更新
纳克级={'积极':hasHighlight}会不会与我的code工作,这将增加ACTIV作为永久的亮点是present在纳克级的所有时间:
<李班=parentElement> < A HREF =#类=下拉菜单,切换数据切换=下拉菜单>< / A> < UL类=下拉菜单> <李纳克级={亮点:isActive('/ ITEM1')}>< A HREF =$ {建立连结(URI:'/#/ ITEM1')}>< / A> < /李> <李纳克级={亮点:isActive('/ ITEM2')}>< A HREF =$ {建立连结(URI:'/#/ ITEM2')}>< / A> < /李> <李纳克级={亮点:isActive('/项目3')}>< A HREF =$ {建立连结(URI:'/#/项目3')}>< / A> < /李> < / UL> < /李>
解决方案
您说得对,使用纳克级
。
<李班=parentElementNG-CLASS ={'积极':hasHighlight}> < UL> <李班=亮点>< A HREF =>项目1 LT; / A>< /李> <立GT;< A HREF =>项目2'; / A>< /李> <立GT;< A HREF =>项目3'; / A>< /李> < / UL>< /李>
在你的控制器,只要你的类高亮
添加到列表中的元素,将 $ scope.hasHighlight
来等于真正
。当它的起飞,将其更改为假
。
I have following code:
<li class="parentElement">
<ul>
<li class="highlight"><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
</ul>
</li>
<ul>
in here is a dropdown in navigation menu. Active element/<li>
have class highlight...
I need to add class active to parentElement when class highlight is in one of the list element.
I was trying to use ng-class but without success.
UPDATE
ng-class="{'active': hasHighlight}" will not work with my code, it will add activ permanently as highlight is present all time in ng-class:
<li class="parentElement">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"></a>
<ul class="dropdown-menu">
<li ng-class="{ highlight: isActive('/item1')}"><a href="${createLink(uri: '/#/item1')}"></a></li>
<li ng-class="{ highlight: isActive('/item2')}"><a href="${createLink(uri: '/#/item2')}"></a></li>
<li ng-class="{ highlight: isActive('/item3')}"><a href="${createLink(uri: '/#/item3')}"></a></li>
</ul>
</li>
解决方案
You were right about using ng-class
.
<li class="parentElement" ng-class="{'active': hasHighlight}">
<ul>
<li class="highlight"><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
</ul>
</li>
In your controller, whenever you add the class highlight
to the list element, change $scope.hasHighlight
to equal true
. When it's taken off, change it to false
.