如何在使用选项卡集加载应用程序时使选项卡激活

How to make tab active when application load using tabset?

本文关键字：选项 应用程序 激活 加载      更新时间：2023-09-26

当我的应用程序加载第一次它加载app.dit页，但标签不显示活动一旦你开始点击标签后，它的工作，所以我想使第一个标签DIT活跃时应用程序加载。

如何用下面的代码实现这个任务?

main.html 

<uib-tabset active="active">
                <uib-tab ng-repeat="tab in tabs" select="go(tab.route)" heading="{{tab.heading}}" active="tab.active" disable="tab.disabled">
                    <!--<div ui-view="">{{tab.route}}</div>-->
                </uib-tab>
            </uib-tabset>

ctrl.js 

 $scope.tabs = [{
       heading: 'DIT',
       route: 'app.dit',
       active: true
   }, {
       heading: 'ST',
       route: 'app.st',
       active: false
   }, {
       heading: 'UAT',
       route: 'app.uat',
       active: false
   }, ];
   $scope.go = function(route) {
       $state.go(route);
   };
   function active(route) {
       return $state.is(route);
   }
   $scope.active = active;
   $scope.$on("$stateChangeSuccess", function() {
       $scope.tabs.forEach(function(tab) {
           tab.active = active(tab.route);
       });
   });

app.js 

  $urlRouterProvider.otherwise(function($injector) {
      var $state = $injector.get('$state');
      $state.go('app.dit');
  });
  $stateProvider
      .state('app', {
          abstract: true,
          url: '',
          templateUrl: 'web/global/main.html',
          controller: 'MainCtrl'
      })
      .state('app.dit', {
          url: '/dit',
          templateUrl: 'view/partials/dit.html',
          controller: 'DitCtrl'
      })
      .state('app.st', {
          url: '/st',
          templateUrl: 'view/partials/st.html',
          controller: 'StCtrl'
      })
      .state('app.uat', {
          url: '/uat',
          templateUrl: 'view/partials/uat.html',
          controller: 'UatCtrl'
      })
      .state('app.prod', {
          url: '/prod',
          templateUrl: 'view/partials/prod.html',
          controller: 'ProdCtrl',
      })

,

从文档来看，<uib-tabset active="active">中绑定的active变量必须是您想要显示为活动的选项卡的索引。

将控制器中的$scope.active变量设置为0(或您希望的任何索引)应该会有所帮助。

此外，您可以根据当前的$state直接动态设置$scope.active变量(而不是依赖于每个选项卡的active bool并在$stateChangeSuccess期间操作它，这可能会冒显示2+活动选项卡的风险)。

var returnActiveTabIndex = function() {
    var current_route = $state.$current.name;  //or however you want to find your current $state
    var tab_routes = $scope.tabs.map(function(tab) { return tab.route });
    var active_index = tab_routes.indexOf(current_route);
    return (active_index > -1) ? active_index : 0;
};
$scope.active = returnActiveTabIndex();

额外的好处是在浏览器重新加载后，CTRL将读取您的当前状态(例如，"app.st")，并根据匹配的路由设置"app.st"选项卡为活动

相关文章：