CODEWITHSUNDEEP
javascriptangularjstwitter-bootstraptabs
Nisar
Nisar

Reputation: 6038

Active on angularjs bootstrap tab with static content

I am using Angular Bootstrap UI to show a tabset with static content.

I was frustrated by this because the UI Bootstrap Tab documentation only shows navigation to tabs created by binding with ng-repeat.

    <uib-tabset>
        <uib-tab heading="Basic Details">
            <div role=" tabpanel" class="tab-pane active" id="basicDetails">
            tab1
            <button class="btn btn-success" ng-click="$parent.tabs[1].select()">Go to Tab 3</button>
            </div>
        </uib-tab>
        <uib-tab heading="Basic Details">
            <div role=" tabpanel" class="tab-pane active" id="basicDetails">
            tab2
            </div>
        </uib-tab>
    </uib-tabset>

I found some thing hear Stackoverflow but this is not working with current version of Angular Bootstrap UI..

Plunker

Upvotes: 5

Views: 13051

Answers (2)

pikkvile
pikkvile

Reputation: 2521

I'm not sure this is the cleanest solution, but I ended up with manually switching tabs by click on headings:

<uib-tabset>
    <uib-tab heading="h1" active="h1Active" ng-click="h1Active=true">
     ... content 1
    <uib-tab>
    <uib-tab heading="h2" active="!h1Active" ng-click="h1Active=false">
     ... content 2
    <uib-tab>
</uib-tabset>

I have just two tabs here, and one variale is enough to switch between. But in case of more tabs I guess you just have to implement little more complicated login on click. I mean, probably, set one to true and others to false.

Upvotes: 0

Peter Elliott
Peter Elliott

Reputation: 3322

to set a tab as active, you need to set a boolean flag on your scope to "true" and associate it with the given tab's active attribute. this would look like

<uib-tabset>
    <uib-tab heading="Basic Details" active="tabOneActive">
        tab1
    </uib-tab>
    <uib-tab heading="Other Details" active="tabTwoActive">
       tab2
    </uib-tab>
</uib-tabset>

when tabOneActive is set to true, the first tab will be shown

Upvotes: 5

Related Questions