如何在Angular-UI中选择哪个引导选项卡

Is there a way to tell which tab that has been selected when using the Bootstrap tabs in Angular UI?

是否有一种方法可以告诉您在使用角UI中的引导选项卡时选择了哪个选项卡?

I tried watching the panes array but it deosn't seem to be updated when switching tab. Can one specify a callback function when a tab is selected?

我试着查看窗格数组，但它在切换选项卡时似乎没有更新。当选择选项卡时，是否可以指定回调函数?

Update with code example.

更新代码示例。

The code very much follows the example from the Angular UI bootstrap page.

代码非常类似于角UI引导页面中的示例。

Markup:

标记:

<div ng-controller="TabsDemoCtrl">
    <tabs>
        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
            <div ng-include="pane.template"></div>
        </pane>
    </tabs>
</div>

Controller:

控制器:

var TabsCtrl = function ($scope) {
  $scope.panes = [
    { title:"Events list", template:"/path/to/template/events" },
    { title:"Calendar", template:"/path/to/template/calendar" }
  ];
};

5 个解决方案

#1

Actually this is really simple as each pane exposes the active attribute that supports 2-way data binding:

实际上，这非常简单，因为每个窗格都公开支持双向数据绑定的活动属性:

<tabs>
    <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">      
        {{pane.content}}
    </pane>
</tabs>

and then an active tab can be easily found, for example:

然后可以很容易地找到一个活动选项卡，例如:

$scope.active = function() {
    return $scope.panes.filter(function(pane){
      return pane.active;
    })[0];
};

Here is a working plunk: http://plnkr.co/edit/fEvOtL?p=preview

这里有一个有效的plunk: http://plnkr.co/edit/fevotl?

#2

if you don't have a repeater, bind tabs (or spans) activity to an Array

如果没有中继器，则将制表符(或跨)活动绑定到数组

 <tab active="tabActivity[0]">...</tab>
 <tab active="tabActivity[1]">...</tab>

and in your controller

和在你的控制器

$scope.tabActivity=[false,false];

then you can get active tab with

然后你可以得到活动标签

$scope.tabActivity.indexOf(true)

#3

I solved it by adding one method (onTabSelect) on the controller and calling it from ng-click event of Tab. Below solution worked for me please see this in action

我通过在控制器上添加一个方法(onTabSelect)来解决它，并从选项卡的ng-click事件中调用它。下面的解决方案对我起作用了，请看实际操作

function myTabController($scope) {
  $scope.onTabSelect = function(tabName) {
    $scope.selectedTabName = tabName;
    console.log("Changed tab to " + tabName);
  }


  <tabset>
    <tab ng-click="onTabSelect('A')">
      <tab-heading>
        A
      </tab-heading>
    </tab>
    <tab ng-click="onTabSelect('B')">
      <tab-heading>
        B
      </tab-heading>
    </tab>
  </tabset>

#4

My answer is for the case you place manually the tab and you are using the angular ui boostrap library, you could use the select attribute

我的答案是，如果你手动放置标签你使用的是角ui boostrap库，你可以使用select属性

<uib-tabset class="main-nav">
  <uib-tab select="showTab('a')">
    <uib-tab-heading>a</uib-tab-heading>
    <div class="tab-content"> <span>a</span></div>
  </uib-tab>
  <uib-tab select="showTab('b')">
    <uib-tab-heading>b</uib-tab-heading>
    <div class="tab-content"> <span>b</span></div>
  </uib-tab>
</uib-tabset>

in the showTab function passing in select attribute, you can check whether your tab is selected by their name like in my case.

在select属性中传递的showTab函数中，您可以检查您的选项卡是否按我的情况选择。

The full example is here from angular ui, notice the select: http://plnkr.co/edit/tc9lZWIz6kjS2WqmITXW?p=preview

完整的示例在这里，来自棱角ui，请注意选择:http://plnkr.co/edit/tc9lzwiz6kjs2wqmitxw?

#5

The accepted answer works only for dynamic tabs.

接受的答案只适用于动态选项卡。

For static tabs, you can set the active attribute of uib-tabset directive to a scope property, and compare it with the tab index to find the active tab.

对于静态选项卡，可以将uib-tabset指令的活动属性设置为scope属性，并将其与选项卡索引进行比较，以找到活动选项卡。

For example, in the below code I'm doing so to set a class on active tab header (I can use the active class added by ui.bootstrap and achieve the same result, I'm doing so as an example):

例如，在下面的代码中，我这样做是为了在active tab header上设置一个类(我可以使用ui添加的active类)。引导并实现同样的结果，我举个例子):

angular.module('test', ['ngAnimate', 'ui.bootstrap']);

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
 .test {
  background: dodgerblue;
}

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>

<div ng-app="test">
  <uib-tabset active="active">
    <uib-tab index="0">
      <uib-tab-heading ng-class="{test:active==0}">Static title1</uib-tab-heading>Static content1
    </uib-tab>
    <uib-tab index="1">
      <uib-tab-heading ng-class="{test:active==1}">Static title1</uib-tab-heading>Static content2</uib-tab>
    <uib-tab index="2">
      <uib-tab-heading ng-class="{test:active==2}">Static title1</uib-tab-heading>Static content3</uib-tab>
  </uib-tabset>
</div>