CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap-3angular-ui-bootstrap
alex_gabriel
alex_gabriel

Reputation: 373

How to change active tab on button click in angularjs?

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?

Upvotes: 0

Views: 5635

Answers (2)

Kais
Kais

Reputation: 2008

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;
}

Upvotes: 0

Joe. He
Joe. He

Reputation: 140

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

Upvotes: 0

Related Questions