How to change active tab on button click in angularjs?

Question

I'm working on an angularjs based page.and I'm using tabset feature of bootstrap for a page.I could have used tabs() jquery function for horizontal tabs but I'm using vertical tabset for my page.its an outlook styled page.

<div class="white-bg animated fadeIn">

<div class="row s-t-xs">
    <div class="col-xs-10">
        <div class="tabs-container">

                <tabset class="tabs-left">
                    <tab id="tab1" heading="Job Preferences">
                    //TAB1 Content
                     <div class="form-group">
                     <div class="col-md-10 col-sm-offset-9">
          <button class="btn btn-primary" type="submit" id="button1">Save &amp; Next</button>
                     </div>
                     </div>
                    </tab>

                    <tab id="tab2" heading="Experience / Project Summary" >
                    //TAB2 Content
                    <div class="form-group">
                    <div class="col-md-10 col-sm-offset-9">
          <button class="btn btn-primary" type="submit" id="button2">Save &amp; Next</button>
                    </div>
                    </div>
                    </tab>


                    <tab id="tab3" heading="Educations / Certifications / Awards">

                   //TAB3 Content
                     <div class="form-group">
                     <div class="col-md-10 col-sm-offset-9">
          <button class="btn btn-primary" type="submit" id="button3">Finish</button>
                     </div>
                     </div>

                    </tab>
                </tabset>

        </div>
    </div>
</div>

What I need is to change activate 2nd tab when i click the 'Save & Next' button on first tab..and the 3rd tab to be activated when i click the "save & next' button on 2nd tab. Is there any simple way i can make it done?

Check this Fiddle jsfiddle.net/simonbingham/bFWUM

Vijayakumar Selvaraj
– Vijayakumar Selvaraj

2015-11-06 06:58:54 +00:00
Commented Nov 6, 2015 at 6:58 — Vijayakumar Selvaraj
– Vijayakumar Selvaraj, Commented Nov 6, 2015 at 6:58

Joe. He · Accepted Answer · 2015-11-06 06:59:12Z

0

you can try this simple way . angular-ui http://angular-ui.github.io/bootstrap/#/tabs

answered Nov 6, 2015 at 6:59

Joe. He

1407 bronze badges

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

Comments

Kais · Accepted Answer · 2015-11-06 07:19:15Z

0

HTML:

<tabset>
 <tab heading="First" ng-attr-active="firtTab">Content1</tab>
 <tab heading="Second" ng-attr-active="secondTab">Content2</tab>
</tabset>

Controller:

$scope.firstTab = true;
$scope.secondTab = false;
$scope.next= function(){
$scope.firstTab = false;
$scope.secondTab = true;
}

answered Nov 6, 2015 at 7:19

Kais

2,0083 gold badges24 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to change active tab on button click in 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