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

【问题标题】：Next tab on `enter` - AngularMaterial`enter` 上的下一个选项卡 - Angular Material
【发布时间】：2017-11-15 11:18:48
【问题描述】：

我在我的应用程序中使用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 的选项卡。对于其他任何事情，我必须在按 Enter 后单击某个位置，然后它会移动到下一个选项卡。每当用户按 Enter 键时，我都需要它移动到下一个选项卡。我做错了什么或错过了什么？

【问题讨论】：

标签： angularjs angularjs-material

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

【讨论】：