adamweeks adamweeks - 3 months ago 12x
AngularJS Question

Creating and Selecting Angular Material Tab

I am currently using the

property of the
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?


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


<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)


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 comparing 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!