Active on angularjs bootstrap tab with static content

Question

I am using the Angular Bootstrap user interface to show a tab with static content.

I was upset about this because the documentation for the Bootstrap UI tab only shows the transition to the tabs created by the ng-repeat binding.

<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 something that I hear https://stackoverflow.com/a/1672929/..but this does not work with the current version of Angular Bootstrap UI ..

Plunker

Answer 1

To set the tab as active, you need to set the boolean flag in your scope to true and associate it with this tab active attribute. it will 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 set to true, the first tab will be displayed

Answer 2

I'm not sure if this is the cleanest solution, but I ended up manually switching tabs by clicking on the headers:

 <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 only two tabs here, and one variale is enough to switch between them. But in the case of more tabs, I assume that you just need to implement a slightly more complex login when clicked. I mean, maybe set to true and others to false.