如何执行点击Angular Material md-tab

Question

我有一个 md-tabs 标签，其中 2 md-tab 个标签：

        <md-tabs id="tabs" class="md-accent" md-align-tabs="top" md-dynamic-height>
            <md-tab id="tab1">
                <md-tab-label>Tab 1</md-tab-label>
                <md-tab-body>
                    <div ng-include="'tab1.html'"></div>
                </md-tab-body>
            </md-tab>
            <md-tab id="tab2">
                <md-tab-label>Tab 2</md-tab-label>
                    <md-tab-body>
                        <div ng-include="'tab2.html'"></div>
                    </md-tab-body>
            </md-tab>
        </md-tabs>

我可以通过单击它们（在菜单中）在它们之间正确切换，但我想要的是能够执行单击 tab1 例如。假设在 tab2 里面我通过 AJAX 提交，一旦我得到 success 我想自动切换到 tab1.

我尝试了很多东西，我已经将 md-tabs 的属性 selectedIndex 设置为 md-tab 的 md-active 属性 md-tab =23=]。我还尝试调用据称由事件点击触发的方法（select() 来自 $mdTabsCtrl）。但显然这一切都没有奏效。

那么，如何在单击自定义按钮之一时切换到特定选项卡？

Answer 1

您可以在成功块中直接更改 selectedIndex 的值（您要访问的选项卡的 selectedIndex 值）。

如果您想转到特定选项卡，请在方法中输入您想转到的选项卡的 selectedIndex 值..
继续 tab1 这里是方法

$scope.firstTab = function() {
   $scope.selectedIndex = 0;
};

在 ajax 调用成功后调用此方法将始终将您带到第一个选项卡。每次单击此处后移动到下一个选项卡的方法是

$scope.max = (number of tabs) - 1;
$scope.nextTab = function() {
   var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
   $scope.selectedIndex = index;
};

Answer 2

这每次都有效：angular.element("md-tab md-tab-item")[0].click()

注意：如果您从 angular 控制器 to avoid apply error.

中的函数调用它，您可能必须将其包装在 $timeout（即 setTimeout）中

如何执行点击Angular Material md-tab

How to perform click on Angular Material md-tab

angularjs

angular-material