Set static uib-tab to active via method in angularJS

Question

I am trying to use the uib-tabset in my project for the tabs. Everything is working good but I am trying to figure out how to set the active status of a tab via a method in my angularJS coding.

<uib-tabset active="active">
<uib-tab index="0">
 <div>Some Con</div>
</uib-tab>
<uib-tab index="2">
 <div>Some Con</div>
</uib-tab>
<uib-tab index="3">
 <div>Some Con</div>
</uib-tab>

Is there some way to access the active attribute? I know I'm forgetting something but just cannot think of it at this moment. Any help is appreciated.

eliagentili · Accepted Answer · 2016-10-28 23:16:36Z

1

See this example: http://jsbin.com/xugavim/edit?html,js,output

You can simply set the active attribute passing a variable. Then modify the variable to change the active tab, like i do with this button (ng-click):

<button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select second tab</button>

You can see the same example, and more options, in the original documentation here: https://angular-ui.github.io/bootstrap/#/tabs

answered Oct 28, 2016 at 23:16

eliagentili

6195 silver badges9 bronze badges

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

4 Comments

Xerc Over a year ago

While this is how the code works on their documentation, this isn't what I'm looking for. I need to find a way to make a static tab active from inside a method in the angularJS coding on my js file. For my application, I want to be able to set a certain tab active depending on the results of a json request.

eliagentili Over a year ago

And you can do exactly in that way. Say for example that you bind the active attribute with a variable called active (in your $scope). Do the json request, and after change $scope.active as you want.

eliagentili Over a year ago

See this new jsbin that sets the second tab active and then, after 2 seconds change. jsbin.com/xugavim/edit?js,console,output

Xerc Over a year ago

Ah! For whatever reason I didn't see the first example that you gave, only the second one with the info on the documentation. This makes more sense and actually works the way I want it to work! Thank you!

Collectives™ on Stack Overflow

Set static uib-tab to active via method in angularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related