CODEWITHSUNDEEP
angularjstwitter-bootstraptabsdirective
Templar
Templar

Reputation: 63

Angular Bootstrap - Default tab active (dynamic tab)

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 ?

Upvotes: 6

Views: 8447

Answers (1)

Vinay K
Vinay K

Reputation: 5572

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

Upvotes: 6

Related Questions