ps0604 ps0604 - 1 year ago 149
AngularJS Question

How to select a tab on Angular UI programmatically?

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?


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

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


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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download