adamweeks adamweeks - 4 months ago 26
AngularJS Question

Creating and Selecting Angular Material Tab

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

Answer

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!

Comments