How to select a tab on Angular UI programmatically?

Question

In this plunk I have three tabs that are created from an array. When I click on the button, I need the one named "Name 1" to be selected and have the focus. How can this be achieved?

HTML

<uib-tabset>
   <uib-tab ng-repeat="t in tabs" heading="{{t.title}}" >
     {{t.content}}
   </uib-tab>
</uib-tabset>


<br/><br/><br/>
<button ng-click="tabs.select(1)">Focus on Name 1</button>

Javascript

  $scope.tabs = [
    { title:'Name 0', content: "Content 0" },
    { title:'Name 1', content: "Content 1" },
    { title:'Name 2', content: "Content 2" }
  ];

developer033 · Accepted Answer · 2016-08-04 19:22:25Z

4

You have to setting the active attribute, as below:

<uib-tabset active="active">

Then in your button:

<button ng-click="active = 1">Focus on Name 1</button>

Here's the forked Plunker.

answered Aug 4, 2016 at 19:22

developer033

25k8 gold badges85 silver badges113 bronze badges

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

Collectives™ on Stack Overflow

How to select a tab on Angular UI programmatically?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related