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。

我已经尝试了很多东西，我已经从selectedIndex设置了md-tabs属性，我设置了{{1}的属性md-active到md-tab。我还尝试调用可能因事件点击（true来自select()）而触发的方法。但显然没有任何效果。

那么，当我点击我的一个自定义按钮时，如何切换到特定的标签？

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

注意：如果从角度控制器to avoid apply error.内的函数调用它，则可能必须将其包装在$ timeout（即setTimeout）中

如何执行Angular Material md-tab的单击

2 个答案: