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

<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 переходит на следующую вкладку, и когда я нажимаю, должно происходить обратное вторая вкладка кнопка "Сохранить и вернуться"


angularjs angularjs-material
person Pravin    schedule 29.08.2016    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

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

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

person Thomas Zoé    schedule 29.08.2016
comment
Спасибо за ответ @Thomas, но он не работает, даже когда я включил обе вкладки - person Pravin; 29.08.2016
comment
Какую версию углового и углового материала вы используете? - person Thomas Zoé; 29.08.2016
comment
Я на самом деле попробовал это сам сейчас, myIndex++ не работает, поэтому я использовал myIndex = myIndex + 1, теперь он должен работать - person Thomas Zoé; 29.08.2016
comment
Спасибо @Thomas, это сработало для меня. Я хочу спросить еще одну вещь, когда я нажимаю на вкладку, я хочу вызвать функцию инициализации данных, как это сделать? Я пробовал с ng-click, но это не работает - person Pravin; 29.08.2016
comment
Что не работает? Данные не отображались? Он не был загружен? Можете ли вы показать мне свой код? Как должна работать загрузка данных в ng-click - person Thomas Zoé; 29.08.2016
comment
Я получил свою ошибку в функции контроллера. Еще раз спасибо - person Pravin; 29.08.2016

arrow_upward
1
arrow_downward

Вы можете использовать функцию в 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>

in .js 

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

arrow_upward
0
arrow_downward

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

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

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

person hurricane    schedule 29.08.2016