I'm creating a menu in controller.
$scope.menu = [
{
"title": "Home",
"state": "app.home",
"active": $state.is("app.home")
},
{
"title": "Product",
"state": "app.product",
"active": $state.is("app.product")
},
{
"title": "Category",
"state": "app.category",
"active": $state.is("app.category")
}
]
I set a property to specify active state. If my state is current, active property will be true.
<ul class="nav nav-pills nav-stacked">
<li ng-repeat="item in menu" ng-class="{active:item.active}">
<a ui-sref="{{item.state}}"> {{item.title}}</a>
</li>
</ul>
But when I change state, active property is not firing.
Your suggested solution correction:
<ul class="nav nav-pills nav-stacked">
<li ng-repeat="item in menu" ng-class="{active: $state.is('stateName')}">
<a ui-sref="{{item.state}}"> {{item.title}}</a>
</li>
</ul>
Or you may simply use ui-sref-active :
Example
Given the following template:
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
</li>
</ul>
When the app state is "app.user" (or any children states), and contains the state parameter "user" with value "bilbobaggins", the resulting HTML will appear as (note the 'active' class):
<ul>
<li ui-sref-active="active" class="item active">
<a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
</li>
</ul>
The class name is interpolated once during the directives link time (any further changes to the interpolated value are ignored).
Multiple classes may be specified in a space-separated format:
<ul>
<li ui-sref-active='class1 class2 class3'>
<a ui-sref="app.user">link</a>
</li>
</ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.