Angular Bootstrap static tab selection from controller

I have a set of static angular boot tabs:

  <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>


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

2 answers

You can use an attribute active

similar to how you use it ng-model

on the input. eg.

  <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>




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



All Articles