How to switch tab in same page using angularjs?

Question

<tabset class="overflowhidden marginbottom0" tabset-name="clientTabset">

<tab heading="General" title="general">
<p>Hello</p>
<button  ng-click="general()"  class="btn btn-primary"  has-permission='CREATE_CLIENT'>Next</button>
</tab>

<tab heading="Address" title="address" >
<p>hello world </p>
</tab>

</tabset>

I want to switch tab from general to address tab after clicking Next Button

make use of ng-show or ng-hide.

Sankar
– Sankar

2016-07-14 07:11:32 +00:00
Commented Jul 14, 2016 at 7:11 — Sankar
– Sankar, Commented Jul 14, 2016 at 7:11

Gayathri Mohan · Accepted Answer · 2016-07-14 07:24:16Z

2

Hi you can try using active true

js

$scope.active = {
    one: false,
    two: true
  };

HTMl

 <tabset>
    <tab heading="General" title="general">
        One
         <button  ng-click="general()"  class="btn btn-primary"  has-permission='CREATE_CLIENT'>Next</button>
      </tab>
      <tab heading="Address" title="address"  active="active.two">Two</tab>
    </tabset>

for reference https://plnkr.co/edit/nRHFHDByvcQhiQTDkbFh?p=preview

answered Jul 14, 2016 at 7:24

Gayathri Mohan

2,9724 gold badges21 silver badges26 bronze badges

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

Comments

mtamma · Accepted Answer · 2016-07-14 07:36:57Z

0

javascript

$scope.general = function () {
  $scope.active = 1;
}

html

<tabset class="overflowhidden marginbottom0" tabset-name="clientTabset" active="active">

  <tab heading="General" title="general" index="0">
    <p>Hello</p>
    <button ng-click="general()" class="btn btn-primary" has-permission='CREATE_CLIENT'>Next</button>
  </tab>

  <tab heading="Address" title="address" index="1">
    <p>hello world</p>
  </tab>

</tabset>

reference: https://github.com/angular-ui/bootstrap/tree/master/src/tabs

edited Jul 14, 2016 at 7:36

answered Jul 14, 2016 at 7:31

mtamma

5334 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to switch tab in same page using angularjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related