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}"

如何在从不同页面加载时激活标签

3 个答案: