how to add active class to menu in angularjs

Question

I want to add active class to menu bar when it is active. I tried below javascript code at my workplace but didn't work. here is the online link of plunkr

<!doctype html>

    <html ng-app="myApp">
      <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
      </head>
      <body>
        <script type="text/ng-template" id="pages/home.html">
          <h1>Home</h1>
          <h3>{{message}}</h3>
        </script>
        <script type="text/ng-template" id="pages/blog.html">
          <h1>Blog</h1>
          <h3>{{message}}</h3>
        </script>
        <script type="text/ng-template" id="pages/about.html">
          <h1>About</h1>
          <h3>{{message}}</h3>
        </script>

        <a href="#/">Home</a>
        <a href="#/blog">Blog</a>
        <a href="#/about">About</a>

        <div ng-view></div>

        <script src="app.js"></script>
      </body>
    </html>

    javascript file

    var app = angular.module('myApp', ['ngRoute']);

    app.config(function($routeProvider) {
      $routeProvider

      .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'HomeController'
      })

      .when('/blog', {
        templateUrl : 'pages/blog.html',
        controller  : 'BlogController'
      })

      .when('/about', {
        templateUrl : 'pages/about.html',
        controller  : 'AboutController'
      })

      .otherwise({redirectTo: '/'});
    });

    app.controller('HomeController', function($scope) {
      $scope.message = 'Hello from HomeController';
    });

    app.controller('BlogController', function($scope) {
      $scope.message = 'Hello from BlogController';
    });

    app.controller('AboutController', function($scope) {
      $scope.message = 'Hello from AboutController';
    });

possible duplicate of http://stackoverflow.com/questions/12592472/how-to-highlight-a-current-menu-item — fikkatra, Apr 15 '16 at 08:10
I would suggest you to write a directive as kfis suggested: [activeLink directive](http://stackoverflow.com/a/12631074/1694393) — trollr, Apr 15 '16 at 09:23

byteC0de · Answer 1 · 2016-04-15T10:27:37.460

Add a variable in controller named for get current path

app.controller('HomeController', function($scope, $location, $rootScope) {
  $rootScope.activePath = $location.path();
  $scope.message = 'Hello from HomeController';
});

app.controller('BlogController', function($scope, $location, $rootScope) {
  $rootScope.activePath = $location.path();
  $scope.message = 'Hello from BlogController';
});

app.controller('AboutController', function($scope, $location, $rootScope) {
  $rootScope.activePath = $location.path();
  $scope.message = 'Hello from AboutController';
});

Then add ng-class in link

 <a href="#/" ng-class="{'className': $root.activePath == '/'}">Home</a>
 <a href="#/blog" ng-class="{'className': $root.activePath== '/blog'}">Blog</a>
 <a href="#/about" ng-class="{'className': $root.activePath== '/about'}">About</a>

OR

<a href="#/" ng-click="activePath = '/'" ng-class="{'className': activePath == '/'}">Home</a>
<a href="#/blog" ng-click="activePath = '/blog'" ng-class="{'className': activePath== '/blog'}">Blog</a>
<a href="#/about" ng-click="activePath = '/about'" ng-class="{'className': activePath== '/about'}">About</a>

score 0 · Answer 2 · answered Apr 15 '16 at 09:25

In Html

 <ul ng-repeat="menu in topMenuData.menu" class="nav navbar-nav">
         <li ng-class="{active: isActiveMenu(menu)}">
<a ui-sref="{{menu.Url}}" ui-sref-opts="{reload: true, notify: true}" data-ng-click="isNoteClick(menu.Url)">
<i class="{{menu.IconCssClass}}"></i>  {{menu.Name}}</a>
</li>
</ul>

In your Js

function isActiveMenu(menu) {
            //if menu is current then show selected
            if ($state.current.name.indexOf(menu.Url) == 0) {
                return true;
            }


            return result;
        }

In CSS

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #ffffff !important;
    background-color: #E9573E !important;
}

how to add active class to menu in angularjs

2 Answers2