使用角度路由切换基于路由更改的类名称

Question

有3条包含3个表单的路由我试图在当前选项卡上设置基于当前路由的引导活动类。angular.I使用了角路由模块。我怎样才能做到这一点。我米附接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; 
    }; 
    }); 

我在我的页面中使用ng-controller =“MainCtrl as 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();