Setting the initial static tab in angular bootstrap

Question

I don't seem to be able to set the inital tab in an angular bootstrap tabset. It always sets the left most tab to active.

Given the html:

<tabset>
    <tab heading="Static 1" active="data.static1">Static content</tab>
    <tab heading="Static 2" active="data.static2">Static content</tab>
</tabset>

and js:

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.data = {static1: false, static2: true}
};

See the Plunker

Update 6 Aug 2013: Now fixed upstream see the github issue.

I added a new answer because it is still an issue in version 0.6.0 and this question is high in google. — Thomas
– Thomas, Commented Nov 14, 2013 at 16:04

Narretz · Accepted Answer · 2013-07-17 09:24:33Z

13

It seems like (static) tabs overwrite whatever is passed to active when the directive is run. I assume it's a bug. Quick and dirty, you can use a timeout with 0 seconds delay to set the active state. At least in the plunkr, this does not cause any flicker. In your controller:

$scope.data = {};
$timeout(function() {
  $scope.data.static2 = true;  
}, 0)

http://plnkr.co/edit/3KbdKh?p=preview

answered Jul 17, 2013 at 9:24

Narretz

4,9831 gold badge35 silver badges40 bronze badges

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

Comments

Thomas · Accepted Answer · 2013-11-14 16:01:21Z

3

There is an issue in all versions of angular-ui / bootstrap upto Version 0.6.0 :

http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview

it works in the bootstrap3 branch which you have to build yourself:

http://plnkr.co/edit/uOASvZ71DzgZqODmHQP8?p=preview

answered Nov 14, 2013 at 16:01

Thomas

2,1371 gold badge32 silver badges47 bronze badges

1 Comment

Amir Over a year ago

thanks for the info. In case people are curious pull#834 fixed this issue. The deletion of lines 237-239 are the key changes (I patched my version of angular ui with those changes - I independently came to the same fix conclusion).

Ali Habibzadeh · Accepted Answer · 2014-11-27 10:54:54Z

3

I had this issue today and I found the shortest way to get around it was to set it using ng-init:

<tabset justified="true" ng-init="tabs[initialTab].isActive = true">
    <tab heading="Static 1" active="tabs.Inprogress.isActive"></tab>
    ...

answered Nov 27, 2014 at 10:54

Ali Habibzadeh

11.6k4 gold badges56 silver badges80 bronze badges

1 Comment

Leo Over a year ago

Arghhh - thank you, thank you. I could select any tab other than the first programmatically - with ng-init, even that first one now works. I've lost 2 hours trying - so frustrating!

Daniel Trebbien · Accepted Answer · 2015-06-07 14:38:34Z

Your code works in the latest versions of ui-bootstrap (tested versions 0.7.0 through 0.13.0 inclusive):
http://plnkr.co/edit/SzeTqXVSd8CiKL9nkjDC?p=preview

HTML:

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

  <head>
    <script data-require="[email protected]" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script data-require="[email protected]" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
    <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 src="script.js"></script>
  </head>

  <body ng-controller="ExampleController as example">
    <tabset>
      <tab heading="Static 1" active="data.static1">Static content1</tab>
      <tab heading="Static 2" active="data.static2">Static content2</tab>
    </tabset>
  </body>

</html>

JavaScript:

angular.module("myApp", ["ui.bootstrap"])
  .controller("ExampleController", function ($scope) {
    $scope.data = {
      static1: false,
      static2: true
    };
  });

One gotcha to be aware of is that this will not work if the ngController directive is placed on the <tabset> element. In the code above, I have placed the ngController directive on the <body> element.

Collectives™ on Stack Overflow

Setting the initial static tab in angular bootstrap

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related