如何判斷在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公開了支持2向數據綁定的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 active="tabActivity[0]">...</tab>
 <tab active="tabActivity[1]">...</tab>

並在您的控制器中

$scope.tabActivity=[false,false];

那么您可以使用

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

在傳遞select屬性的showTab函數中，您可以像在我的案例中一樣檢查是否按其名稱選擇了選項卡。

完整的例子就是在這里從角UI，請注意select ：

Answer 5

接受的答案僅適用於動態選項卡。

對於靜態選項卡，可以將uib-tabset指令的active屬性設置為作用域屬性，並將其與選項卡索引進行比較以找到活動選項卡。

例如，在下面的代碼中，我這樣做是在活動標簽頁眉上設置一個類（我可以使用ui.bootstrap添加的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>