Как добавить активный класс в меню в angularjs

Я хочу добавить активный класс в панель меню, когда он активен. Я пробовал код javascript на своем рабочем месте, но не работал. вот онлайн звено plunkr Как добавить активный класс в меню в angularjs

<!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'; 
    });

источник

2016-04-15 Sushant Shinde

возможный дубликат http://stackoverflow.com/questions/12592472/how-to-highlight -a-current-menu-item – fikkatra

Я предлагаю вам написать директиву, предложенную kfis: [директива activeLink] (http://stackoverflow.com/a/12631074/1694393) – trollr

Добавить переменную в контроллер с именем для получения текущего пути

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'; 
});

Затем добавить ng-class в ссылке

<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>

ИЛИ

<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>

источник

2016-04-15 09:19:11 byteC0de

не работает mate :( –

В 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>

В вашем Js

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


      return result; 
     }

В 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; 
}

источник

2016-04-15 09:25:03 Dixit

Как добавить активный класс в меню в angularjs

ответ

Смежные вопросы