Конструкция материалов md-tabs with angularjs

У меня есть вопрос относительно дизайна материалов md-tabs control. Я использую md-tabs с Angularjs на одной из страниц, и он отлично работает. У меня также есть md-кнопка на этой странице, и мы хотим, чтобы пользователь нажал эту кнопку, и мы перейдем к следующей вкладке. Я новичок во всей этой материально-угловой вещи, и был бы признателен, если бы кто-нибудь мог вести меня в правильном направлении.Конструкция материалов md-tabs with angularjs

источник

2015-07-23 user615611

Вы можете использовать атрибут md-selected по директиве md-tabs. md-tabs использует атрибут md-selected для выбора выбранной вкладки. Поэтому вы можете просто обновить $scope.selectedTab по щелчку вашего md-button, чтобы выбрать нужную вкладку.

Посмотрите на этот фрагмент кода:

angular.module("material", ["ngMaterial", "ngAnimate"]) 
 

 
.controller("tabCtrl", ["$scope", function($scope) { 
 
    $scope.selectedTab = 0; 
 
    
 
    $scope.changeTab = function() { 
 
     if ($scope.selectedTab === 2) { 
 
      $scope.selectedTab = 0; 
 
     } 
 
     else { 
 
      $scope.selectedTab++; 
 
     } 
 
     
 
    } 
 
}]);

.tab-content { 
 
    margin: 20px 0 0 0; 
 
    text-align:center; 
 
} 
 

 
.tab-container { 
 
    height:120px; 
 
} 
 

 
.tab-change-row { 
 
    text-align:center; 
 
} 
 

 
.tab-change-btn { 
 
    display: inline-block 
 
}

<link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script> 
 
<body ng-app="material"> 
 
    <div ng-controller="tabCtrl"> 
 
     <div class="tab-container"> 
 
      <md-tabs md-selected="selectedTab"> 
 
       <md-tab label="One"> 
 
        <p class="tab-content">Tab One content</p> 
 
       </md-tab> 
 
       <md-tab label="Two"> 
 
        <p class="tab-content">Tab Two content</p> 
 
       </md-tab> 
 
       <md-tab label="Three"> 
 
        <p class="tab-content">Tab Three content</p> 
 
       </md-tab> 
 
      </md-tabs>  
 
     </div> 
 
     
 
     
 
     <div class="tab-change-row"> 
 
      <md-button class="tab-btn md-raised" ng-click="changeTab()">Change Tab</md-button>  
 
     </div> 
 
     
 
    </div> 
 
</body>

источник

2015-07-23 19:08:21

Блестящий, отличный ответ! – user615611

Рад помочь вам :) –

мы можем использовать «selectedIndex» для этого, поставить значение вкладку индекса как SelectedIndex то он будет делать, что вкладка активна, мы можем использовать selectedIndex в <md-tab-group>, он начнется с нуля. За дополнительной информацией просьба ознакомиться с обзором tabs

источник

2016-10-19 11:05:40

Конструкция материалов md-tabs with angularjs

ответ

Смежные вопросы