get active tab id in button click event inside a bootstrap modal

Question

I have an angular js bootstrap modal window in which I have two tabs. The footer being the same, how do I identify and send the id of the active tab to my submit button event handler?

<div class="modal-body">
<tabset justified="true">
    <tab heading="One" id="one"></tab>
    <tab heading="Two" id="two"></tab>
</tabset>
</div>
<div class="modal-footer">
    <button ng-click="doSomething(activeTabId)">Submit</button>
</div>

score 2 · Accepted Answer · edited Apr 20 '17 at 03:04

Instead of using ng-click you can use select() which is what the angular-bootstrap documentation uses for tab selections. Another note to consider is that the tabset directive and the tab directive creates an isolated scope, therefore, you need to assign the activeId to an object within the scope for it to be accessible within those isolated directives.

Note: Here's an FAQ about scopes.

HTML

<body ng-controller="MyTabController">
  <tabset justified="true">
    <tab heading="One" id="one" select="tab.activeTabId = 1"></tab>
    <tab heading="Two" id="two" select="tab.activeTabId = 2"></tab>
  </tabset>
</body>

JAVASCRIPT

  .controller('MyTabController', function($scope, $window) {

    // store tab related data in a scope object
    // to avoid problems with isolated scopes
    $scope.tab = {};

  });

DEMO

angular.module('app', ['ui.bootstrap'])

  .controller('MyTabController', function($scope, $window) {

    $scope.tab = {};

    $scope.submit = function(activeId) {
      $window.alert(activeId);
    };

  });

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
  <script data-require="angular-bootstrap@*" data-semver="0.13.3" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MyTabController">

  <tabset justified="true">
    <tab heading="One" id="one" select="tab.activeTabId = 1"></tab>
    <tab heading="Two" id="two" select="tab.activeTabId = 2"></tab>
  </tabset>

  <hr> active id: {{ tab.activeTabId }}
  <hr>
  <br>
  <button type="button" ng-click="submit(tab.activeTabId)" class="btn btn-primary btn-block btn-lg">
      Alert Active Id
    </button>

</body>

</html>

From the Angular UI Bootstrap team: good answer. I would suggest changing "...you _can_ use..." to "...you _should_ use..." — icfantv, Oct 12 '15 at 23:02

get active tab id in button click event inside a bootstrap modal

1 Answers1