I am currently using the md-selected property of the md-tabs directive to control which tab is the selected tab. When I create a new tab, I'd like to select the newly created tab. This works in the demo I've included, but throws errors. Is there a better way?

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}}">

error:

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)

I am currently using the md-selected property of the md-tabs directive to control which tab is the selected tab. When I create a new tab, I'd like to select the newly created tab. This works in the demo I've included, but throws errors. Is there a better way?

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}}">

error:

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

2 Answers 2

The major issue I discovered was that your newIndex in the add wasn't 0-based, as push returns the new length:

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

I wrapped the change in a $timeout, otherwise tabs hasn't updated yet and throws an undefined error.

I also changed the previous and selected to just be their respective indices instead of a full tab (You can choose either way, just make sure you know when you're paring an int to a tab object!). And, on the first pass, selected is null:

previous = selected || old;

You can see the whole thing on this codepen!

Since this question was posted, they have added the md-autoselect flag:

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