防止角材料 md-tab 中的选项卡更改事件答案

【问题标题】：Prevent tab change event in angular material md-tab防止角材料 md-tab 中的选项卡更改事件
【发布时间】：2023-03-29 07:42:01
【问题描述】：

是否可以防止 angular-material 的 md-tabs 或 md-tab 指令中的选项卡更改？单击选项卡后，我使用 md-on-select 指令执行功能，并将特定选项卡的 md-active 值设置为 false。但是标签切换仍然发生，我似乎无法阻止它：

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

在我的控制器功能中

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

【问题讨论】：

我不明白你的问题。你想“禁用”某个标签吗？
如果你想禁用相同的标签，你可以使用 ng-disabled 标签而不是 md-active = "false"
不，我想阻止标签更改。示例：最初我在第一个标签页上，然后单击第二个标签页，我不想更改到第二个标签页而是留在第一个标签页上。
所以，如果你想阻止标签上的点击处理程序，我认为你应该使用'ng-disabled'。为什么不呢？
好吧，我不想禁用该选项卡。我只是不想在单击该选项卡时更改为该选项卡。情况是，在第一个选项卡中，我可能有未保存的更改。当用户单击第二个选项卡时，我会显示一条确认消息。如果用户单击“取消”，我不想更改到第二个选项卡，而是留在第一个选项卡上。否则，未保存的更改将会丢失。

标签： javascript angularjs tabs angular-material

【解决方案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;
    }
  }

});

希望对你有帮助

【讨论】：

谢谢。我昨天也找到了这个解决方案:)
这不会阻止 md-tab 移动到下一个选项卡。它实际上会移动，然后回到以前。我想知道是否有办法真正防止 md-tab 移动。可以说，这将有助于在移动之前验证数据。