如何在Angular-UI中判断哪个引导选项卡被选中

Question

在Angular UI中使用Bootstrap选项卡时，是否有一种方法可以告诉我们选择了哪个选项卡?

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

用代码示例更新。

代码与Angular UI引导页面中的示例非常相似。

标记:

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

控制器:

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

Answer 1

实际上这很简单，因为每个pane都公开了支持双向数据绑定的active属性:

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

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

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

Answer 2

如果你没有重复器，将tab(或span)活动绑定到Array

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

和控制器

$scope.tabActivity=[false,false];

那么你可以使用

获得活动TAB

$scope.tabActivity.indexOf(true)

Answer 3

我通过在控制器上添加一个方法(onTabSelect)并从Tab的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>

Answer 4

我的答案是，如果你手动放置选项卡，你正在使用angular ui bootstrap库，你可以使用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>

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

完整的例子来自angular ui，注意select:

Answer 5

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

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

例如，在下面的代码中，我这样做是为了在活动选项卡标题上设置一个类(我可以使用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>