Reputation: 23
Hi i have this menu in my angular js project, how can i make so, that the current class will change depending to what is clicked.
<ul>
<li class="current"><a href="#menu1">Menu 1</a></li>
<li><a href="#menu2">Menu 2</a></li>
<li><a href="#menu3">Menu 3</a></li>
<li><a href="#menu4">Menu 4</a></li>
</ul>
I have following code in my aplication.js
var app = angular.module('tutorialWebApp', [
'ngRoute'
]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/menu1", {templateUrl: "menu1.html"})
.when("/menu2", {templateUrl: "menu2.html"})
.when("/menu3", {templateUrl: "menu3.html"})
}]);
Upvotes: 1
Views: 66
Reputation: 934
You can add your menu in a controller and then to use ng-class function for each link separately https://docs.angularjs.org/api/ng/directive/ngClass
Here it is an example:
html: (replace with you current code)
<nav ng-controller="navController">
<ul>
<li ng-class="menuClass('menu1')"><a href="#menu1">Menu 1</a></li>
<li ng-class="menuClass('menu2')"><a href="#menu2">Menu 2</a></li>
<li ng-class="menuClass('menu3')"><a href="#menu3">Menu 3</a></li>
<li ng-class="menuClass('menu4')"><a href="#menu4">Menu 4</a></li>
</ul>
</nav>
js: (add this at the end of your app.js file)
app.controller('navController', function($scope, $location) {
$scope.menuClass = function(page) {
var current = $location.path().substring(1);
return page === current ? "current" : "";
};
});
Upvotes: 1