`enter` 的下一个选项卡 - Angular Material

Question

我在我的应用程序中使用 angular-material 标签。我需要遍历通过控制器功能动态更改 md-select 的选项卡。这是我的代码

查看：

<md-tabs  md-border-bottom md-selected="selectedIndex">
  <md-tab ng-repeat="tab in tabs" label="Label {{$index + 1}}"></md-tab>
</md-tabs>

这就是我如何更改使用 md-select

建模的值

$scope.changeTab = function(){
  $scope.selectedIndex = ($scope.selectedIndex + 1) %  $scope.tabs.length;
}

现在有两种情况

第一:

如果我创建一个像 <button type='button' ng-click='changeTab()'>Button</button> 这样的按钮，单击此按钮可以正常工作，我可以成功地看到选项卡在单击此按钮时移动 button

第二

事实上，当用户点击 enter 时，我需要移动到下一个选项卡。所以我为此所做的是

$document.bind('keypress', function (e) {
  if (e.which == 13) {
    $scope.selectedIndex = ($scope.selectedIndex + 1) %  $scope.tabs.length;
  }
});

但这显示了随机行为。有时它会移动到下一个选项卡，有时不会。我在每个选项卡上都有不同类型的输入字段。按回车键仅适用于具有 input of type text 的选项卡。对于其他任何事情，我必须在按下回车键后点击某个地方，然后它会移动到下一个选项卡。每当用户按下回车键时，我都需要它移动到下一个选项卡。我做错了什么或错过了什么？

Answer 1

您的问题是您正在更新 angular $digest cicle 之外的选项卡索引。要快速修复您的代码，请将此行包装在 $timeout() 或 $scope.$applyAsync()... (PLUNKER)

内

$scope.$applyAsync(function () {
  $scope.selectedIndex = ($scope.selectedIndex + 1) %  $scope.tabs.length;
});

在正文标签上使用 ng-keypess 指令的选项： (PLUNKER NG-KEYPRESS)

HTML:

<body ng-controller="ChipsController as vm" ng-keypress="changeTab($event)">
  <md-tabs md-selected="selectedIndex">
    <!-- rest of your code -->

JS:

function MainCtrl($scope) {
  //...    
  $scope.changeTab = function(e) {
    if (e.keyCode == 13)
      $scope.selectedIndex = ($scope.selectedIndex + 1) %  $scope.tabs.length;
  };
}

`enter` 的下一个选项卡 - Angular Material

Next tab on `enter` - AngularMaterial

angularjs

angularjs-material