36

在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" }
  ];
};
4

5 回答 5

24

实际上这非常简单，因为每个都pane公开了active支持 2-way 数据绑定的属性：

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

这是一个工作的笨蛋

于 2013-03-28T18:10:39.440 回答
13

如果您没有中继器，请将选项卡（或跨度）活动绑定到数组

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

在你的控制器中

$scope.tabActivity=[false,false];

然后你可以得到活动标签

$scope.tabActivity.indexOf(true)
于 2014-10-21T23:57:28.630 回答
12

我通过在控制器上添加一种方法（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>
于 2014-10-28T20:56:17.413 回答
4

我的答案是针对您手动放置选项卡并且使用 angular 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属性的函数中，您可以检查您的选项卡是否像我的情况一样按其名称选择。

完整示例来自 angular ui，请注意select：

于 2016-02-19T11:11:04.893 回答
2

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

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

例如，在下面的代码中，我这样做是为了在活动选项卡标题上设置一个类（我可以使用activeui.bootstrap 添加的类并获得相同的结果，我这样做是一个例子）：

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>

于 2016-06-15T09:54:23.023 回答