如何使頁面從不同頁面加載時激活

Question

我在我的頁面管理頁面中有一個子菜單。默認情況下，第一個選項卡將處於活動狀態，但是當我想從不同的頁面到特定的菜單changepassword或Payment gateway時。我不能使它活躍。需要幫助。

當前頁：

<ul class="nav nav-pills nav-justified" > 
    <li class="tablist" ng-class="tab === 1? 'active' : ''"> 
     <a ng-click="changeTab(1)" style="cursor: pointer;"><b>MANAGE PROFILE</b></a> 
    </li> 
    <li ng-class="tab === 2? 'active' : ''" style="border-left: 1px solid white; border-right: 1px solid white;"> 
     <a ng-click="changeTab(2)" style="cursor: pointer;"><b>CHANGE PASSWORD</b></a> 
    </li> 
    <li ng-class="tab === 3? 'active' : ''"> 
     <a ng-click="changeTab(3)" style="cursor: pointer;"><b>PAYMENT HISTORY</b></a> 
    </li> 
</ul> 

JS：

$scope.tab = 1; 

$scope.changeTab = function(idx) 
{ 
    $scope.tab = idx; 
}; 

app.js：

.when('/manageProfile', { 
       controller: 'ManageProfileController', 
       templateUrl: 'view/manageProfile.view.html', 
       controllerAs: 'vm' 
      }) 

Profile.html

<li><a href=#/manageProfile>ManageProfile</a></li> 
<li><a href =#/manageProfile>ChangePassword</a></li> 

如何在配置文件頁面中選擇更改密碼時啓用更改密碼選項卡。

Answer 1

我做了這個在我的項目，你可以檢查我的路線和控制器

garageCtrl.js

class GarageController { 
    /*@ngInject*/ 
constructor($state,$stateParams) { 
this.$state = $state; 
this.$stateParams = $stateParams; 

this.filter = this.$stateParams.filter || 'all'; 

// set Initial tab based on the params in URL; 
switch(this.filter) { 
    case 'all': { 
    this.activeTab = 0; 
    break; 
    } 
    case 'commercial': { 
    this.activeTab = 1; 
    break; 
    } 
    case 'residential': { 
    this.activeTab = 2; 
    break; 
    } 
    default: null 
    } 
} 

filterChanged(filter) { 
this.filter = filter; 
//SOME CODES FOR ASYNC// 
this.getGarageList(filter); 
this.pageChanged(this.page); 
} 

} 

GarageController.$inject = [ 
    '$state', 
    '$stateParams' 
    ]; 
export default GarageController; 

本所認爲，我用指令爲我的標籤angular-bootstrap：

<uib-tabset active="$ctrl.activeTab" justified="true"> 
    <uib-tab index="0" heading="All" 
     ng-click="$ctrl.filterChanged('all')"> 
    </uib-tab> 
    <uib-tab index="1" heading="Commercial" 
     ng-click="$ctrl.filterChanged('commercial')"> 
    </uib-tab> 
    <uib-tab index="2" heading="Residential" 
     ng-click="$ctrl.filterChanged('residential')"> 
    </uib-tab> 
    <uib-tab index="3" heading="Valet" 
     ng-click="$ctrl.filterChanged('valet')"> 
    </uib-tab> 
    </uib-tabset> 

這是我的routes.js，我用angular-ui-router：

.state('dashboard.garage', { 
    url: '/dashboard/garage?page&filter', 
    views: { 
    '': { template: '<garage></garage>' }, 
    'content@dashboard.garage': { 
     templateUrl: 'src/app/templates/admin.dashboard.garage.template.html' 
    } 
    }, 
    params: { 
    page: { 
     value: '1', 
     squash: true 
    }, 
    filter: { 
     value: 'all', 
     squash: true 
    } 
    } 
}) 

Answer 2

使用$ routeParams。

var app = angular.module("myApp", ["ngRoute"]); 
    app.config(function($routeProvider) { 
     $routeProvider 

     .when('/manageProfile', { 
      controller: 'ManageProfileController', 
      templateUrl: 'view/manageProfile.view.html', 
      controllerAs: 'vm' 
     }) 
     .when('/manageProfile/:tab', { 
      controller: 'ManageProfileController', 
      templateUrl: 'view/manageProfile.view.html', 
      controllerAs: 'vm' 
     }) 
     //:tab is the route parameter 
    }); 


    app.controller("ManageProfileController",['$scope','$routeParams' ,function ($scope,$routeParams) { 
     $scope.tab = 1; 
      if($routeParams.tab=="2" || $routeParams.tab=="3"){ 
      $scope.tab= Number($routeParams.tab) ; //getting the route parameter "tab" 
     } 
    }]); 


<li><a href=#/manageProfile>ManageProfile</a></li> //no Route param 
<!-- or <li><a href=#/manageProfile/1>ManageProfile</a></li>--> // tab=1 
<li><a href =#/manageProfile/2>ChangePassword</a></li> // tab=2 

Answer 3

試試這個

http://jsfiddle.net/F2wgC/23/

ng-class="{'active' : tab == 1}"