有 3 条包含 3 个表单的路由我试图根据 angular 中的当前路由在当前选项卡上设置引导活动类。我使用了 angular 路由模块。我怎样才能做到这一点。我附上js代码请检查并帮助
plnkr.co/edit/iTgNTJ74iLzlNx902qfP?p=preview
有 3 条包含 3 个表单的路由我试图根据 angular 中的当前路由在当前选项卡上设置引导活动类。我使用了 angular 路由模块。我怎样才能做到这一点。我附上js代码请检查并帮助
plnkr.co/edit/iTgNTJ74iLzlNx902qfP?p=preview
我使用 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();