Angular Bootstrap static tab selection from controller
I have a set of static angular boot tabs:
<tabset>
<tab heading="Static title" select="remember(0)">Static content</tab>
<tab heading="Another title" select="remember(1)">Static content</tab>
<tab heading="Another title" select="remember(2)">Static content</tab>
</tabset>
I created a function to save the last tab. However, I cannot find a way, using a controller, to select the selected tab.
The example on the site is dynamic tabs created from an array in a repeater. So something like $scope.tabs[0].active = true;
it would be enough.
However, these tabs are just markup, not an array, and it doesn't say how (or if) one of these tabs can be selected from the controller.
I'd rather use static tabs if I can, as I wouldn't want to use include.
Thoughts? I rejected an example from UI-Bootstrap here .
source to share
You can use an attribute active
similar to how you use it ng-model
on the input. eg.
<tabset>
<tab active="tabs[0].active" heading="Static title" select="remember(0)">Static content</tab>
<tab active="tabs[1].active" heading="Another title" select="remember(1)">Static content</tab>
<tab active="tabs[2].active" heading="Another title" select="remember(2)">Static content</tab>
</tabset>
source to share
One of the problems I have encountered with ui-bootstrap is how it uses isolated scoping - the conclusion in my experience is that dynamic content is poorly suited to use in conjunction with ui-bootstrap tabs.
Having said that, I forked the plunker . The key is to use the active
tab attribute and control that through your controller.
Based on the comment, I hooked up a function remember
to toggle the state of the tabs. Also, I also created a controller init
to pull activeTab
from sessionStorage.
See Plunker .
Check the console output to make sure the status is correct activeTabs
source to share