如何更改angularjs中按鈕單擊的活動選項卡？

Question

我正在基於angularjs的頁面上工作，並且我正在使用頁面的bootstrap的選項卡集功能。我可以對水平選項卡使用tabs（）jQuery函數，但對頁面使用垂直選項卡。頁。

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

我需要的是，當我單擊第一個選項卡上的“保存並下一個”按鈕時，更改激活第二個選項卡。當我單擊第二個選項卡上的“保存並下一個”按鈕時，要激活的第三個選項卡。我能做到嗎？

Answer 1

您可以嘗試這種簡單的方法。 angular-ui http://angular-ui.github.io/bootstrap/#/tabs

Answer 2

HTML：

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

控制器：

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