angular bootstrap tabs - select function called in page load

Question

I have the angular bootstrap tabs in the following format. (see the plunker)

The select function is supposed to trigger when the tabs are selected. But strangely, when the page is loaded, the very first tab's select function gets triggered. (prints tab selected Dynamic Title 1 onload..)

"http://plnkr.co/edit/vyOOhCdIl7s1Wvou7Dr9?p=preview"

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope) {
  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2' },
    { title:'Dynamic Title 3', content:'Dynamic content 3' }
  ];
  
  $scope.tabSelect = function(title){
    console.log("tab selected "+title);
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div ng-controller="TabsDemoCtrl">
      <tabset>
        <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled" select="tabSelect(tab.title)">
          {{tab.content}}
        </tab>
      </tabset>
    </div>
  </body>
</html>

select() (Defaults: null) : An optional expression called when tab is activated so it makes sense, during load by default first tab is activated and it fires the event. — PSL
– PSL, Commented May 18, 2015 at 1:34
Looking through the source code of angular-ui there seems to be no way to specify that. However you can easily do var firstTime = true; $scope.tabSelect = function(title){ if(firstTime){ firstTime = false; return; } console.log("tab selected "+title); }; — miensol
– miensol, Commented May 18, 2015 at 6:54
ng-click solution works perfectly. Please consider accept it as the correct answer. — Arashsoft
– Arashsoft, Commented Nov 28, 2016 at 19:04

Joe Jadamec · Accepted Answer · 2016-08-19 23:57:01Z

3

change your select to ng-click like this:

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-click="tabSelect(tab.title)">

answered Aug 19, 2016 at 23:57

Joe Jadamec

1561 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular bootstrap tabs - select function called in page load

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related