CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-ui
user1669811
user1669811

Reputation: 835

how to set active on angularjs bootstrap tab

am using Angular Bootstrap UI to show a tabset with static content (using AngularUI bootstrap). Here is the plunker link that illustrate my issue http://plnkr.co/edit/n8Xp3GrAqlbNxZ7VrXR6?p=preview

The issue is if I want to set the 1st tab invisible and the 2nd tab visible, it still shows the 1st tab content as active.

I tried to apply active css on the tab, but it does not work:

<tabset>
    <tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab>
    <tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>

Any idea to solve the issue?

Upvotes: 1

Views: 8415

Answers (1)

kubuntu
kubuntu

Reputation: 2535

Even though an old question. I had a fairly similar issue and used ng-init to set the active attribute.

Using the code supplied:

<div ng-init="activeTab = true">
<tabset>
    <tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab active="activeTab">
    <tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>
</div>

Demo in Plunker

Of course, instead of using ng-init, activeTab could be initialized in the controller.

Upvotes: 2

Related Questions