Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 298
Templar Avatar asked Mar 25 '15 17:03

Templar


People also ask

How do I make bootstrap tab active by default?

Answer: Use the HTML5 localStorage Object In Bootstrap, if you refresh the page the tab is reset to default setting. However, you can use the HTML5 localStorage object to save some parameter for the current tab locally in the browser and get it back to make the last active tab selected on page reload.

Which tab is the default active tab?

Answer. Answer: Word's default tabs are set every half-inch. These tabs are indicated at the bottom of the horizontal ruler by tiny tick marks.

How do I change the active tab color in bootstrap?

You can always modify your navigation list through css. Use this css code instead, in that way use you use the a tag to change the color and its background-color. It's improper to use the li tag to set the background only and a tag to set the color of the text.

How do I create a navigation tab in bootstrap?

Approach: To create a tabbed navigation menu, create a basic unordered list with list items as links. Then add classes nav and nav-tabs of bootstrap to unordered list and nav-items class to list items. Example 1: HTML.


1 Answers

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

like image 106
Vinay K Avatar answered Nov 13 '22 02:11

Vinay K