如何更改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.

我正在开发一个基于angularjs的页面。我正在使用一个页面的bootstrap的tabset功能。我可以使用tab()jquery函数用于水平标签但我使用垂直tabset用于我的page.its一个outlook样式页。

<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?

我需要的是当我单击第一个选项卡上的“保存并下一步”按钮时更改激活第二个选项卡...当我单击第二个选项卡上的“保存并下一步”按钮时,第三个选项卡将被激活。有没有简单的方法我可以完成它吗?

2 个解决方案

#1

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

你可以试试这个简单的方法。 angular-ui http://angular-ui.github.io/bootstrap/#/tabs

#2

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

#1