Default option for tab when creating new component by Angular JS

Question

I tried to use the method shown by Angular JS official home page code to create new tab on my web page.

...Something here...
.directive('tabs', function() {
return {
  restrict: 'E',
  transclude: true,
  scope: {},
  controller: function($scope, $element) {
    var panes = $scope.panes = [];

    $scope.select = function(pane) {
      angular.forEach(panes, function(pane) {
        pane.selected = false;
      });
      pane.selected = true;
    }

    this.addPane = function(pane) {
      if (panes.length == 0) $scope.select(pane);
      panes.push(pane);
    }
  },
  template:
    '<div class="tabbable">' +
      '<ul class="nav nav-tabs">' +
        '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
          '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
        '</li>' +
      '</ul>' +
      '<div class="tab-content" ng-transclude></div>' +
    '</div>',
  replace: true
};
})

.directive('pane', function() {
  return {
    require: '^tabs',
    restrict: 'E',
    transclude: true,
    scope: { title: '@' },
    link: function(scope, element, attrs, tabsCtrl) {
      tabsCtrl.addPane(scope);
    },
    template:
      '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
      '</div>',
    replace: true
  };
})

It works properly but it is selected by default. How can I select particular tab as default.

<tabs>
  <pane title="Localization">
    Date: {{ '2012-04-01' | date:'fullDate' }} <br>
    Currency: {{ 123456 | currency }} <br>
    Number: {{ 98765.4321 | number }} <br>
  </pane>
  <pane title="Pluralization">
    <div ng-controller="BeerCounter">
      <div ng-repeat="beerCount in beers">
        <ng-pluralize count="beerCount" when="beerForms"></ng-pluralize>
      </div>
    </div>
  </pane>
</tabs>

Say if I want to always make the last tab as default tab selected, how can I do that?

Matt Zeunert · Accepted Answer · 2014-05-22 08:06:08Z

0

I can think of two ways to do that. The simpler is selecting the the new pane whenever one is added:

this.addPane = function(pane) {
    if (panes.length == 0) $scope.select(pane);
    panes.push(pane);
    $scope.select(pane);
}

This has minor performance implications since the pane is selected unnecessarily and will also cause problems when adding additional tabs after the initial page load (which with the previous code would be selected).

The other way would be to wait until the panes have been set up and then select the last pane:

// $timeout dependency needs to be passed into the directive
$timeout(function(){
    $scope.select(panes[panes.length - 1]);
}, 0)

Calling setTimeout with 0 means the Javascript engine will finish running the current code and then start with the new code immediately after.

answered May 22, 2014 at 8:06

Matt Zeunert

16.6k7 gold badges56 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Default option for tab when creating new component by Angular JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related