CODEWITHSUNDEEP
angularjstwitter-bootstrap
MVC_Future_Guru
MVC_Future_Guru

Reputation: 239

how to have a tab be open by default with angular and bootstrap

Currently I have two tabs, that I can open by clicking either, but I'd like the first one to be opened by default..

<ul class="nav nav-tabs">
    <li ng-class="{active: activeTab == 'implementation'}">
        <a ng-click="activeTab='implementation'">Implementation</a>
    </li>
    <li ng-class="{active: activeTab == 'videos'}">
        <a ng-click="activeTab='videos'">Videos</a>
    </li>
</ul>

<div ng-show="activeTab=='implementation'"  >
    <h4>test heading</h4>
</div>

<div ng-show="activeTab=='videos'">
    <h4>test heading</h4>
</div>

Any suggestions?

Upvotes: 1

Views: 3757

Answers (1)

aet
aet

Reputation: 7292

What about just initializing activeTab?

<ul class="nav nav-tabs" ng-init="activeTab = 'implementation'">
    <li ng-class="{active: activeTab == 'implementation'}">
        <a ng-click="activeTab='implementation'">Implementation</a>
    </li>
    <li ng-class="{active: activeTab == 'videos'}">
        <a ng-click="activeTab='videos'">Videos</a>
    </li>
</ul>

Upvotes: 7

Related Questions