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

您的问题是您在角度$ 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`上的下一个标签 - AngularMaterial

1 个答案: