Angular Bootstrap - Default tab active (dynamic tab)

Question

I have an issue with Angularjs Bootstrap Tabs. I want a dynamic tab to be active by default but it seems I can't as long as I have a static tab inside the same tabset.

<tabset ng-init="tab.active = true">
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
        {{tab.content}}
    </tab>
    <tab heading="Static">
        Static
    </tab>
</tabset>

`

Here is a plunkr to explain :

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

I want the "Dynamic Title 1" to be selected by default. Is it possible with the active directive or do I have to create a function which will handle the active state ?

Vinay K · Accepted Answer · 2015-03-25 17:34:40Z

6

Try this.

<tabset>
  <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-init="tab.active = $index === 0">
    {{tab.content}}
  </tab>
  <tab heading="Static">
    Static
  </tab>
</tabset>

Working Plnkr

answered Mar 25, 2015 at 17:34

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

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

6 Comments

Templar Over a year ago

Thanks a lot ! It works perfectly. How did you find how to do it ? Directly in the directive code ?

Templar Over a year ago

Aww, new issue, it broke something. Now I can't change the active state from the controller .. Plnkr link : plnkr.co/edit/xV7OlVBkYYOv44IdsUHa?p=preview Click on "New", the active state doesn't change to the tab newly created. If you take off the ng-init, it works. Any idea ?

Vinay K Over a year ago

Use $timeout to update the newly added tab. Updated plnkr: plnkr.co/edit/9N4RMaasrG8stw37bHKH?p=preview

Templar Over a year ago

Wow thank you for your quick answer, it works ! I learned a lot here :)

Vinay K Over a year ago

Glad to help you. do upvote if it does help you.. :)

|

Collectives™ on Stack Overflow

Angular Bootstrap - Default tab active (dynamic tab)

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related