web-dev-qa-db-ja.com

Angular-UIでどのbootstrapタブが選択されているかを知る方法

Bootstrap tabs in Angular UI ？

ペインの配列を見てみましたが、タブを切り替えるときに更新されないようです。タブが選択されたときにコールバック関数を指定できますか？

コード例で更新します。

コードはAngular UI bootstrapページからの例に非常に続きます。

マークアップ：

<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" }
  ];
};
angularjstwitter-bootstrapangular-uiangular-ui-bootstrapbootstrap-tabs
34
John P

実際には、各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

24
pkozlowski.opensource

リピーターがない場合は、タブ（またはスパン）アクティビティを配列にバインドします

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

そしてあなたのコントローラーで

$scope.tabActivity=[false,false];

その後、アクティブなタブを取得できます

$scope.tabActivity.indexOf(true)
13
alban maillere

コントローラーに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>
12
Rupesh Kumar Tiwari

私の答えは、手動でタブを配置し、angular ui boostrap libraryを使用している場合、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関数では、私の場合のように、名前でタブが選択されているかどうかを確認できます。

完全な例は here from angular ui、selectに注意してください：

3
Tho Vo

受け入れられた答えは、動的タブに対してのみ機能します。

静的タブの場合、_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>_
2
T J