Как изменить активную вкладку на нажатие кнопки в angularjs?

Question

Как изменить активную вкладку на нажатие кнопки в angularjs?

0

Я работаю над основанной на angularjs страницей. И я использую функцию tabset для начальной загрузки для страницы. Я мог бы использовать функцию jquery() 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>

Мне нужно изменить активацию второй вкладки, когда я нажимаю кнопку "Сохранить и затем" на первой вкладке.. и 3-я вкладка будет активирована, когда я нажму кнопку "Сохранить и продолжить" на второй вкладке. Есть ли простой способ я могу сделать это?

alex_gabriel 06 нояб. 2015, в 07:58

Источник

0

Проверьте это Fiddle jsfiddle.net/simonbingham/bFWUM
Vijayakumar Selvaraj 06 нояб. 2015, в 06:58

Теги:

javascript

jquery

angularjs

twitter-bootstrap-3

angular-ui-bootstrap

2 ответа

Ещё вопросы

Проверьте это Fiddle jsfiddle.net/simonbingham/bFWUM

Joe. He · Answer 1 · 2015-11-06T05-33-00.000Z

вы можете попробовать этот простой способ. angular-ui http://angular-ui.github.io/bootstrap/#/tabs

Kais · Answer 2 · 2015-11-06T05-00-00.000Z

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