How to tell which bootstrap tab is selected in Angular-UI

Question

Is there a way to tell which tab that has been selected when using the Bootstrap tabs in Angular UI?

I tried watching the panes array but it deosn't seem to be updated when switching tab. Can one specify a callback function when a tab is selected?

Update with code example.

The code very much follows the example from the Angular UI bootstrap page.

Markup:

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

Controller:

var TabsCtrl = function ($scope) {
  $scope.panes = [
    { title:"Events list", template:"/path/to/template/events" },
    { title:"Calendar", template:"/path/to/template/calendar" }
  ];
};

Yockey

would be awesome if you could check if my answer does the trick for you and if not, open an issue in github.com/angular-ui/bootstrap with a proposal on how you would like it to work! – Whitehead

You put me in the right direction. I wanted to run some code when a certain tab was selected and I came up with this solution: plnkr.co/edit/zctmee – Yockey

Answer 1

Actually this is really simple as each pane exposes the active attribute that supports 2-way data binding:

<tabs>
    <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">      
        {{pane.content}}
    </pane>
</tabs>

and then an active tab can be easily found, for example:

$scope.active = function() {
    return $scope.panes.filter(function(pane){
      return pane.active;
    })[0];
};

Here is a working plunk

Whitehead

Thanks @pkozlowski.opensource. This helped alot. It should definitely be included in the examples/documentation on the Bootstrap tabs in Angular UI. – Martelle

What about if you're manually setting your tab panes and not using a repeater? – Academician

@Whitehead Any idea how to get the active tab when not using repeater? – Apriorism

this does not work anymore for the latest angular-bootstrap (2.3.0) – Obvious

Answer 2

if you don't have a repeater, bind tabs (or spans) activity to an Array

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

and in your controller

$scope.tabActivity=[false,false];

then you can get active tab with

$scope.tabActivity.indexOf(true)

Blakley

If you want to only check if one tab is selected, bind the active property of the tab to a model property and then use this property to determine other behavior on the page. – Bicipital

For better readability you can use object instead of array and object props instead of indexes. For example, $activeTabs = {people : true, projects : false}, <ui-tab active="activeTabs.people"> and check smthng like ng-show="activeTabs.people" – Dongola

Answer 3

I solved it by adding one method (onTabSelect) on the controller and calling it from ng-click event of Tab. Below solution worked for me please 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>

Coy

Answer 4

My answer is for the case you place manually the tab and you are using the angular ui boostrap library, you could use the select attribute

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

in the showTab function passing in select attribute, you can check whether your tab is selected by their name like in my case.

The full example is here from angular ui, notice the select:

Medick

Answer 5

The accepted answer works only for dynamic tabs.

For static tabs, you can set the active attribute of uib-tabset directive to a scope property, and compare it with the tab index to find the active tab.

For example, in the below code I'm doing so to set a class on active tab header (I can use the active class added by ui.bootstrap and achieve the same result, I'm doing so as an example):

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>

Sulfatize