Angular UI - set active tab programmatically

Question

I using AngularUI with this code:

<uib-tabset type="pills">
    <uib-tab heading="Tab 1">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2">Tab 2 content</uib-tab>
</uib-tabset>

I want to programmatically change the current active tag from my angular-controller code. For example, select tab "2" to be the active.

How this can be done?

Did you try providing an ID to each tab and then set focus on it? — FDavidov
– FDavidov, Commented Sep 4, 2016 at 7:57
I thought about this. Seems to me like a wrong approach, when dealing with AngularJS (maybe good approach for JQuery). I'm wrong? — No1Lives4Ever
– No1Lives4Ever, Commented Sep 4, 2016 at 8:44
have you tried going over the docs ? there's an example that sets a specific tab using an outside button click — svarog
– svarog, Commented Sep 4, 2016 at 8:48
The solution suggested by Ashwani uses index, which is equivalent of giving ID. In both cases, you could generate the ID/Index using Angular's capabilities. — FDavidov
– FDavidov, Commented Sep 4, 2016 at 10:43

Ashwani · Accepted Answer · 2016-09-04 08:50:39Z

15

You need to use the active property on ui-tabset. Then You need to have indexes on each tab to work from outside context.

<uib-tabset type="pills" active="active">
    <uib-tab heading="Tab 1" index="0">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2" index="1">Tab 2 content</uib-tab>
</uib-tabset>

See this working plnkr: Working Plnkr

answered Sep 4, 2016 at 8:50

Ashwani

2682 silver badges8 bronze badges

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

2 Comments

Sana Over a year ago

How can we do it for dynamic tabsets?

Ashwani Over a year ago

@Sana You mean something like this ? plnkr.co/edit/GQfq8zpKqGm2uZWA8oGU?p=preview

Roham Tehrani · Accepted Answer · 2018-04-02 14:53:06Z

6

I had the same problem and this answer helped me to figure out.

I used two variables in the scope: $scope.showTabsInView and $scope.activeTabIndex.

Default Values are:

$scope.showTabsInView = false;
$scope.activeTabIndex = 0;

First, I loaded my dynamic tabs, then I specified the value of activeTabIndex. Then I changed the value of showTabsInView to true.

<uib-tabset ng-if="showTabsInView" active="activeTabIndex">
    <uib-tab data-ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab>
</uib-tabset>

You can simply ignore dynamic tabs and $scope.showTabsInView if your case is not that much complicated.

answered Apr 2, 2018 at 14:53

Roham Tehrani

3,0298 gold badges38 silver badges51 bronze badges

Collectives™ on Stack Overflow

Angular UI - set active tab programmatically

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related