如何使页面从不同页面加载时激活

问题描述：

我在我的页面管理页面中有一个子菜单。默认情况下，第一个选项卡将处于活动状态，但是当我想从不同的页面到特定的菜单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>

如何在配置文件页面中选择更改密码时启用更改密码选项卡。

你可能想插入网址参数来检查什么是当前的活动选项卡 – vistajess

能否请您做一个捣鼓这一点。 – sameer

默认调用第一个选项卡，如** $ scope.changeTab（1）; ** – NNR

答

我做了这个在我的项目，你可以检查我的路线和控制器

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>' }, 
    '[email protected]': { 
     templateUrl: 'src/app/templates/admin.dashboard.garage.template.html' 
    } 
    }, 
    params: { 
    page: { 
     value: '1', 
     squash: true 
    }, 
    filter: { 
     value: 'all', 
     squash: true 
    } 
    } 
})

答

使用$ 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

答

试试这个

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

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

如何使页面从不同页面加载时激活

相关推荐