Angular-Material 选项卡适合用作向导

Question

我找到了添加下一个和上一个按钮功能的方法，并且已经实现了它：http://plnkr.co/edit/iNEXWXUBDvsrKgUSelkW?p=preview

          $scope.nextTab = function() {
        var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
        $scope.selectedIndex = index;

        if(!$scope.carinfo.$valid) alert('it has errors');
}

但是，如果当前选项卡中的表单无效，我需要一种最佳方法来防止用户切换到下一个 tab/step。当用户单击 next/previous 按钮时，我可以通过简单地检查 $valid 变量是否绑定到表单状态或者表单是否附加了 ng-invalid class 来执行此操作。但是，不确定当用户不是通过单击我添加的 'next' 和 'previous' 按钮而是在实际选项卡本身上切换选项卡时，实现这种阻止行为的最佳方法是什么。

Answer 1

<md-tab> 有一个回调，您可以将其连接到名为 md-on-select 的回调中。

来源：https://material.angularjs.org/latest/api/directive/mdTab

您不能在该回调中执行相同的逻辑吗？

或者您可以使用 md-active 标志

禁用您不希望用户切换到的选项卡

Angular-Material 选项卡适合用作向导

Angular-Material tabs adapted to work as wizard

angularjs

angular-material