Selecting an Angular Bootstrap static tab from controller

Question

I have a set of static angular bootstrap 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 store which tab was last selected. However, I can't seem to find a way, from the controller, to select a given tab.

The example on the site is with dynamic tabs, created from an array in a repeater. So then something like $scope.tabs[0].active = true; would suffice.

However, these tabs are just markup not an array, and it does not say how (or if) it's possible to select one of these tabs from the controller.

I'd prefer to use static tabs if I can, since I'd rather not use includes.

Thoughts? I forked the example from UI-Bootstrap here.

rob · Accepted Answer · 2015-04-21 16:39:54Z

4

You can use the active attribute similar to how you would use ng-model on an input. e.g.

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

answered Apr 21, 2015 at 16:39

rob

18.7k13 gold badges73 silver badges95 bronze badges

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

Comments

Ahmad · Accepted Answer · 2015-04-21 17:27:20Z

1

One of the issues that I have faced using the ui-bootstrap is the way it uses the isolated scope - the conclusion in my experience is that dynamic content is not well suited when used in conjunction with ui-bootstrap tabs.

Having said that, I have forked your plunker. The key is to used the active attribute of the tab and manage that via your controller.

Based on the comment, I have hooked up the remember function to toggle the state of the tabs. In addition, I have also set up a controller init method to pull the activeTab from sessionStorage.

See the Plunker.

Check the console output to verify that the activeTabs state is correctly maintained

edited Apr 21, 2015 at 17:27

answered Apr 21, 2015 at 16:42

Ahmad

25.3k9 gold badges54 silver badges86 bronze badges

1 Comment

Steve Over a year ago

So how would I set the other x tabs (here 2) to inactive easily? I forked your plunker with my code for setting/remembering, but so far it's only setting the active tab from the array: plnkr.co/edit/jhH9NP49ruMJyQGw5Ef2?p=preview

Collectives™ on Stack Overflow

Selecting an Angular Bootstrap static tab from controller

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related