Active on angularjs bootstrap tab with static content

Question

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

I see the next and previous buttons are not working in your plunker. Is that correct or is it just me? — Gurnard
– Gurnard, Commented Jan 17, 2017 at 11:11

Peter Elliott · Accepted Answer · 2015-10-28 19:07:20Z

5

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

answered Oct 28, 2015 at 19:07

Peter Elliott

3,32218 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nisar Over a year ago

update my question.. added plunker plnkr.co/edit/kzg9ITOiubLuZwkw3TmY?p=preview

Gert-Jan Over a year ago

This no longer works, instead you have to set the active property on the uib-tabset element to the index of the active tab. See angular-ui.github.io/bootstrap/versioned-docs/1.3.1

Markus Pscheidt Over a year ago

It no longer works in new versions, right, but if you have to work with an outdated version then this answer is really useful -> +1

Force444 Over a year ago

@MarkusPscheidt, I don't think there is a valid reason not to work with the newest stable version of UI Bootstrap always!

Markus Pscheidt Over a year ago

@DSF No valid reason in a perfect world ;) We were a bit behind with our updatrs..

pikkvile · Accepted Answer · 2015-11-18 09:46:30Z

0

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.

answered Nov 18, 2015 at 9:46

pikkvile

2,5212 gold badges18 silver badges16 bronze badges

Collectives™ on Stack Overflow

Active on angularjs bootstrap tab with static content

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related