使用angular-route

Question

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