javascript - How to set the default tab in Bootstrap - Stack Overflow

I have a question regarding my Angular Bootstrap UI.

I have something like:

<div class="container" ng-controller='sCtrl'>
    <tabset id='tabs'>
        <tab heading="Title1" >
        </tab>
        <tab heading="Title2" active ="true">
        </tab>
        <tab heading="Title3">
        </tab>
    </tabset>
</div>

My problem is everytime I add active='true' in my tab, I get:

TypeError: undefined is not a function
    at Object.fn (.10.0.js:2762:11)
    at h.$digest (.2.15/angular.min.js:106:71)
    at h.$apply (.2.15/angular.min.js:108:370)
    at g (.2.15/angular.min.js:71:120)
    at C (.2.15/angular.min.js:75:241)
    at XMLHttpRequest.y.onreadystatechange (.2.15/angular.min.js:76:280) 

I've searched google and moved jQuery file loaded before Bootstrap file but still getting the same error. Can anyone help me about it? Thanks a lot!

I have a question regarding my Angular Bootstrap UI.

I have something like:

<div class="container" ng-controller='sCtrl'>
    <tabset id='tabs'>
        <tab heading="Title1" >
        </tab>
        <tab heading="Title2" active ="true">
        </tab>
        <tab heading="Title3">
        </tab>
    </tabset>
</div>

My problem is everytime I add active='true' in my tab, I get:

TypeError: undefined is not a function
    at Object.fn (http://test./lib/ui-bootstrap-tpls-0.10.0.js:2762:11)
    at h.$digest (http://ajax.googleapis./ajax/libs/angularjs/1.2.15/angular.min.js:106:71)
    at h.$apply (http://ajax.googleapis./ajax/libs/angularjs/1.2.15/angular.min.js:108:370)
    at g (http://ajax.googleapis./ajax/libs/angularjs/1.2.15/angular.min.js:71:120)
    at C (http://ajax.googleapis./ajax/libs/angularjs/1.2.15/angular.min.js:75:241)
    at XMLHttpRequest.y.onreadystatechange (http://ajax.googleapis./ajax/libs/angularjs/1.2.15/angular.min.js:76:280) 

I've searched google and moved jQuery file loaded before Bootstrap file but still getting the same error. Can anyone help me about it? Thanks a lot!

• javascript
• css
• angularjs
• twitter-bootstrap
• angular-ui-bootstrap

Share Improve this question Follow edited Dec 21, 2014 at 13:39 Zanon 30.8k2121 gold badges118118 silver badges126126 bronze badges asked May 7, 2014 at 22:07 FlyingCatFlyingCat 14.3k3636 gold badges127127 silver badges201201 bronze badges 3

• 1 Is it me or you used active="true' instead of active="true" ?? – Zerquix18 Commented May 7, 2014 at 22:09
• @Zerquix18 that was a typo. thanks for pointing it out. – FlyingCat Commented May 7, 2014 at 22:10
• @drew_w what is myTabs[1]? Is myTabs an id? – FlyingCat Commented May 7, 2014 at 22:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The short answer is exactly what you reference in your question - if you set active to true either in code or in the HTML, it selects the tab. There are two ways to create tabs:

• Static Tabs:

  <tabset id="tabs">
    <tab heading="Title1"></tab>
    <tab heading="Title2" active="true"></tab>
    <tab heading="Title3"></tab>
  </tabset>
  

  Here if you set active="true" the tab will be the default active tab.

• Dynamic Tabs:

  HTML

  <tabset id="tabs2">
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"></tab>
  </tabset>
  

  Javascript

    $scope.tabs = [
      {"title": "Dynamic 1", "active": false},
      {"title": "Dynamic 2", "active": true},
      {"title": "Dynamic 3", "active": false}];
  

To see both of these working, check out this plunker: http://plnkr.co/edit/nR9GNIhGAmha8Rh85lUa?p=preview

The tab's active property must point to a variable and not a constant. You're telling the second tab to always be active.

active also can't be an expression. It seems they are working on changing how active works. Check out this github issue for more.