创建和选择角度材料选项卡答案

【问题标题】：Creating and Selecting Angular Material Tab创建和选择角度材料选项卡
【发布时间】：2015-05-26 20:54:05
【问题描述】：

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

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

【问题讨论】：

标签： javascript angularjs material-design angular-material

【解决方案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 与@987654330 进行比较@ 目的！）。而且，在第一次通过时，selected 是 null：

previous = selected || old;

你可以在这个codepen看到整个事情！

【讨论】：

啊，是的，我搞砸了 codepen 的 newIndex 部分。我想将它包装在 $timeout 中是等待创建标签的唯一方法。谢谢！

【解决方案2】：

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

md-autoselect 布尔值
如果存在，在初始加载后添加的任何选项卡都将被自动选择

【讨论】：