I have used ng-class to make things active when the page is loaded .
I have a menu list in which some pages has subpages. I want to highlight(make it active when any sub page is selected). So far I have done
This is my navController
$scope.isActive = function(destination) {
return destination === $location.path();
}
My Menu Items
<ul class="mcd-menu">
<li>
<a ui-sref="app.user.menu1" ng-class="{active: isActive('/menu1')}">
<i class="fa fa-home"></i>
<strong>Menu 1</strong>
</a>
</li>
<li>
<a>
<i class="fa fa-th"></i>
<strong>Menu 2</strong>
</a>
<ul>
<li><a ui-sref="app.user.submenu1" ng-class="{active: isActive('/submenu1')}"><i class="fa fa-lock"></i>Sub Menu 1</a></li>
<li><a ui-sref="app.user.submenu2" ng-class="{active: isActive('/submenu2')}"><i class="fa fa-money"></i>submenu 2</a></li>
<li><a ui-sref="app.user.submenu3" ng-class="{active: isActive('/submenu3')}"><i class="fa fa-bolt"></i>submenu 3</a></li>
<li><a ui-sref="app.user.submenu4" ng-class="{active: isActive('/submenu4')}"><i class="fa fa-check-square"></i>submenu 4</a></li>
</ul>
</li>
</ul>
The Active property works fine on navigating to each page
but I want to make Menu 2 active when navigated to submenu..How can I acheive that
I have tried like
<a ng-class="{active: isActive('/submenu2'),active: isActive('/submenu3'),active: isActive('/submenu4')}"><i class="fa fa-th"></i><strong>Menu 2</strong></a>
Try This,
var app = angular.module('app', ['ui.router']);
app.controller('main', function($scope) {
$scope.selected = function(value) {
$scope.active = value;
};
});
app.config(function($stateProvider) {
$stateProvider.state({
name: 'Menu1',
url: '/menu1',
template: 'This is Menu One.'
}).state({
name: 'Item1',
url: '/menu2/item1',
template: 'This is Item One.'
}).state({
name: 'Item2',
url: '/menu2/item2',
template: 'This is Item Two.'
}).state({
name: 'Item3',
url: '/menu2/item3',
template: 'This is Item Three.'
});
});<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//npmcdn.com/angular-ui-router@1.0.0-beta.1/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="main">
<div>
<span class="btn btn-default" ui-sref="Menu1" ui-sref-active="active" ng-click="selected(false)">Menu 1</span>
</div>
<div>
<span class="btn btn-default" ng-class="{'active': active === 'menu2'}">Menu 2</span>
<ul>
<li ui-sref="Item1" ui-sref-active="active" ng-click="selected('menu2')" class="btn btn-primary btn-xs">Item 1</li>
<li ui-sref="Item2" ui-sref-active="active" ng-click="selected('menu2')" class="btn btn-primary btn-xs">Item 2</li>
</ul>
</div>
<div>
<span class="btn btn-default" ng-class="{'active': active === 'menu3'}">Menu 3</span>
<ul>
<li ui-sref="Item3" ui-sref-active="active" ng-click="selected('menu3')" class="btn btn-primary btn-xs">Item 3</li>
</ul>
</div>
<div ui-view></div>
</div>
</body>