Переключение имени класса на основе изменения маршрута с использованием углового маршрута

Question

имеет 3 маршрута, содержащих 3 формы. Я пытаюсь установить активный класс начальной загрузки на текущую вкладку на основе текущего маршрута в угловом. Я использовал модуль углового маршрута. Как я могу это достичь. Я м прикрепления кода JS, пожалуйста, проверьте и помочь, пожалуйста,

plnkr.co/edit/iTgNTJ74iLzlNx902qfP?p=preview

Answer 1

Я this.tab = 1 по умолчанию вкладки, где класс будет сначала быть «активным». Вот мой контроллер дополнение:

angular.module('ciwiseGenledgerApp') 
    .controller('MainCtrl', function() { 
    this.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma' 
    ]; 

    this.tab = 1; 
    this.selectTab = function(setTab) { 
    this.tab = setTab; 
    }; 
    this.isSelected = function(checkTab){ 
    return this.tab === checkTab; 
    }; 
    }); 

я использовал нг-контроллер = «MainCtrl, как Ctrl» на моей странице. Вот фрагмент на странице.

  <div class="collapse navbar-collapse" id="js-navbar-collapse" ng-controller="MainCtrl as ctrl"> 

      <ul class="nav navbar-nav"> 
       <li ng-class="{ active: ctrl.isSelected(1) }"><a href="#/" ng-click="ctrl.selectTab(1)">Home</a></li> 
       <li ng-class="{ active: ctrl.isSelected(2) }"><a ng-href="#/reports" ng-click="ctrl.selectTab(2)">Reports</a></li> 
       <li ng-class="{ active: ctrl.isSelected(3) }"><a ng-href="#/admin" ng-click="ctrl.selectTab(3)">Admin</a></li> 
       <li ng-class="{ active: ctrl.isSelected(4) }"><a ng-href="#/help" ng-click="ctrl.selectTab(4)">Help</a></li> 
       <li ng-class="{ active: ctrl.isSelected(5) }"><a ng-href="#/about" ng-click="ctrl.selectTab(5)">About</a></li> 
       <li ng-class="{ active: ctrl.isSelected(6) }"><a ng-href="#/contact" ng-click="ctrl.selectTab(6)">Contact</a></li> 
      </ul> 
      </div> 

Мой активный код вкладки не зависит от маршрутизации представления. Вот мой app.js. Он имеет код маршрутизации для моих просмотров.

angular 
    .module('ciwiseGenledgerApp', [ 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    'ngSanitize', 
    'ngTouch' 
    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl', 
     controllerAs: 'main' 
     }) 
     .when('/about', { 
     templateUrl: 'views/about.html', 
     controller: 'AboutCtrl', 
     controllerAs: 'about' 
     }) 
     .when('/contact', { 
     templateUrl: 'views/contact.html', 
     controller: 'ContactCtrl', 
     controllerAs: 'contact' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 


    $.material.init();