angularjs - 使用 angular-route 根据路由更改切换类名

Question

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