Изменение вкладки с помощью нажатия кнопки

Question

<div ng-cloak>
  <md-content>
   <md-tabs md-dynamic-height md-border-bottom>
  <md-tab label="one">
     <md-content class="md-padding">
        <h1 class="md-display-2">Tab One</h1>          
             <md-button class="md-raised">Save & Next</md-button>
    </md-content>
  </md-tab>
  <md-tab label="two"  ng-disabled="true">
    <md-content class="md-padding">
      <h1 class="md-display-2">Tab Two</h1>          
     <md-button class="md-raised">Save & Back </md-button>
    </md-content>
  </md-tab>      
</md-tabs>

Я использую угловой + угловой материал, есть два меню вкладок "Один" и "Два", когда я нажимаю кнопку "Сохранить и Далее", должна быть включена следующая вкладка, и foucs переходит на следующую вкладку, и когда я нажимаю на кнопку, происходит обратное. вторая вкладка кнопка "Сохранить и вернуться"

Answer 1

md-selected на md-tabs показывает текущий индекс вкладок. Вы можете изменить индекс с помощью ng-клика по кнопке. Должно быть что-то вроде следующего

<div ng-cloak>
 <md-content>
  <md-tabs md-dynamic-height md-border-bottom md-selected="myTabIndex">
   <md-tab label="one">
    <md-content class="md-padding">
    <h1 class="md-display-2">Tab One</h1>          
         <md-button class="md-raised" ng-click="myTabIndex = myTabIndex+1">Save & Next</md-button>
    </md-content>
   </md-tab>
   <md-tab label="two"  ng-disabled="true">
    <md-content class="md-padding">
     <h1 class="md-display-2">Tab Two</h1>          
     <md-button class="md-raised" ng-click="myTabIndex = myTabIndex-1">Save & Back </md-button>
    </md-content>
   </md-tab>      
</md-tabs>

Но вы должны теперь, если следующая или предыдущая вкладка отключена, этот метод не работает, потому что вы не можете переключиться на вкладку, которая отключена.

Answer 2

Вы можете использовать функцию в JS для изменения вкладки.

<md-button class="md-raised" ng-click="changetab('n')">Save & Next</md-button>
<md-button class="md-raised" ng-click="changetab('b')">Save & Back</md-button>

в.js

$scope.changetab = function(nav){
    if(nav == 'n')
      $scope.myTabIndex = $scope.myTabIndex +1;
    else
      $scope.myTabIndex = $scope.myTabIndex -1;
}

Answer 3

В md-tab вы можете использовать md-active="scopeName",

md-active При значении true устанавливает активную вкладку. Примечание. Одновременно может быть только одна активная вкладка.

Создайте scopeArray, который содержит всю активную информацию вкладки. И используйте его с scopeArray[index] в md-active.