2017-10-12 1 views
0

각도 재료의 md-tab 또는 md-tab 지시문에서 탭 변경을 방지 할 수 있습니까? md-on-select 지시문을 사용하여 탭을 클릭하면 함수를 실행하고 특정 탭에 대해 md-active 값을 false로 설정합니다. 그러나 탭 스위치는 여전히 발생하고 나는 그것을 방지 할 수없는 것 : 컨트롤러 함수에서각도 재료 md-tab에서 탭 변경 이벤트 방지

<md-content> 
     <md-tabs md-dynamic-height md-border-bottom> 
      <md-tab label="Tab1" md-active="ctrl.selectTab1" md-on-select="ctrl.tabClicked('Tab1')"> 
       <md-content> 
        myContent 
       </md-content> 
      </md-tab> 
      <md-tab label="Tab2" md-active="ctrl.selectTab2" md-on-select="ctrl.tabClicked('Tab2')"> 
       <md-content> 
        mycontent 
       </md-content> 
      </md-tab> 
     </md-tabs> 
</md-content> 

을 나는이는 exemple는

function tabClicked(tab) { 
     switch (tab) { 
      case 'Tab1': 
       vm.selectTab1 = true; 
       vm.selectTab2 = false; 
       break; 
      case 'Tab2': 
       vm.selectTab1 = false; 
       vm.selectTab2 = true; 
       break; 
     } 
} 
+0

나는 당신의 질문을 이해하지 않는 도움을 바랍니다. 특정 탭을 '비활성화'하시겠습니까? – Founded1898

+0

동일한 탭을 사용하지 않으려면 md-active = "false"대신 ng-disabled 태그를 사용할 수 있습니다. –

+0

아니요, 탭 변경을 방지하고 싶습니다. 예 : 처음에는 첫 번째 탭 페이지에서 두 번째 탭을 클릭합니다. 두 번째 탭으로 변경하지 않고 첫 번째 탭에서 변경하고 싶습니다. – YourReflection

답변

1

이 있지만 이것은 당신이 원하는 경우에 확실하지 메신저

Exemple

<div ng-app="myApp"> 
<div ng-controller="MyCtrl"> 
    <md-content> 
     <md-tabs md-dynamic-height md-border-bottom md-selected="selected" > 
      <md-tab label="Tab1" ng-click="tabClicked('Tab1')"> 
       <md-content> 
        myContent 1 
       </md-content> 
      </md-tab> 
      <md-tab label="Tab2" ng-click="tabClicked('Tab2')"> 
       <md-content> 
        mycontent 2 
       </md-content> 
      </md-tab> 
     </md-tabs> 
    </md-content> 
</div> 

angular.module("myApp",['ngMaterial']).controller("MyCtrl", function($scope) { 

    $scope.selected = 0 

    $scope.tabClicked = function(tab) { 
    switch (tab) { 
     case 'Tab1': 
      $scope.selected = 0 
      break; 
     case 'Tab2': 
      $scope.selected = 0 
      break; 
    } 
    } 

}); 

난 당신이

+0

감사합니다. 어제도이 해결책을 발견했습니다 :) – YourReflection

+0

이것은 md-tab이 다음 탭으로 이동하는 것을 방해하지 않습니다. 실제로 이동 한 다음 이전으로 돌아갑니다. 실제로 md-tab이 움직이지 않도록하는 방법이 있는지 궁금합니다. 그것은 이동하기 전에 데이터를 확인하는 데 도움이 될 것입니다. – alexandergs