CODEWITHSUNDEEP
javascriptangularjs
Tajul Islam
Tajul Islam

Reputation: 13

How to switch tab in same page using angularjs?

<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

Upvotes: 0

Views: 539

Answers (2)

mtamma
mtamma

Reputation: 533

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

Upvotes: 0

Gayathri Mohan
Gayathri Mohan

Reputation: 2962

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

Upvotes: 2

Related Questions