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];
};

这是一个有效的plunk

Answer 2

如果您没有转发器，请将标签（或跨度）活动绑定到数组

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

并在您的控制器中

$scope.tabActivity=[false,false];

然后您可以使用

获取活动标签

$scope.tabActivity.indexOf(true)

Answer 3

我通过在控制器上添加一个方法（onTabSelect）并通过Tab的ng-click事件调用它来解决它。以下解决方案适合我see this in action

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

我的答案是针对您手动放置标签的情况，并且您使用的是角度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>

在传递showTab属性的select函数中，您可以检查您的标签是否按照我的名字选择。

完整的示例是来自角度ui的here，请注意select：

Answer 5

接受的答案仅适用于动态标签。

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

例如，在下面的代码中我这样做是为了在活动标签页面上设置一个类（我可以使用ui.bootstrap添加的active类并获得相同的结果，我＆＃39 ;以此为例）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

5 个答案: