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

<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

コントローラーに1つのメソッド（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 に答える