创建和选择 Angular Material 选项卡

Question

我目前正在使用 md-tabs 指令的 md-selected 属性来控制哪个选项卡是 selected 选项卡。当我创建一个新标签时，我想 select 新创建的标签。这适用于我包含的演示，但会引发错误。有没有更好的方法？

js:

$scope.addTab = function (title, view) {
  view = view || title + " Content View";
  var newIndex = tabs.push({ title: title, content: view, disabled: false});
  $scope.selectedIndex = newIndex;
};

html:

<md-tabs md-selected="selectedIndex" md-border-bottom="">
  <md-tab ng-repeat="tab in tabs" ng-disabled="tab.disabled" label="{{tab.title}}">

错误：

TypeError: Cannot read property 'offsetLeft' of undefined
at updateInkBarStyles (angular-material.js:12808)
at Object.handleSelectedIndexChange [as fn] (angular-material.js:12750)
at Scope.$get.Scope.$digest (angular.js:14308)
at Scope.$get.Scope.$apply (angular.js:14571)
at HTMLFormElement.<anonymous> (angular.js:21571)
at HTMLFormElement.eventHandler (angular.js:3032)

http://codepen.io/anon/pen/JdbLda

Answer 1

我发现的主要问题是您添加的 newIndex 不是基于 0 的，因为 push returns the new length:

var newIndex = tabs.push({ title: title, content: view, disabled: false});
$timeout(function() {
  $scope.selectedIndex = newIndex - 1;
});

我将更改包装在 $timeout 中，否则 tabs 尚未更新并引发未定义的错误。

我还更改了 previous 和 selected 只是它们各自的索引而不是完整的选项卡（您可以选择任何一种方式，只要确保您知道何时比较 int 到 tab 对象！）。而且，在第一遍中，selected 是 null:

previous = selected || old;

你可以在这个codepen!

上看到全部内容

Answer 2

自发布此问题后，他们添加了 md-autoselect 标志：

md-autoselect boolean
When present, any tabs added after the initial load will be automatically selected

创建和选择 Angular Material 选项卡

Creating and Selecting Angular Material Tab

javascript

angularjs

material-design

angular-material