Using this component a list with millions of items can be rendered without a drop in performance. It does that by "lazily" loading elements into the DOM when they come into view and removing items from the DOM when they are not visible.

Usage #


  .controller('MyController', function($scope) {
    $scope.MyDelegate = {
      countItems: function() {
        // Return number of items.
        return 1000000;

      calculateItemHeight: function(index) {
        // Return the height of an item in pixels.
        return 45;

      configureItemScope: function(index, itemScope) {
        // Initialize scope
        itemScope.item = 'Item #' + (index + 1);

      destroyItemScope: function(index, itemScope) {
        // Optional method that is called when an item is unloaded.
        console.log('Destroyed item with index: ' + index);

<ons-list ng-controller="MyController">
  <ons-list-item ons-lazy-repeat="MyDelegate">
    {{ item }}

Live Example #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

See also #

Attributes #

Name Type
Default Value
ons-lazy-repeat Expression A delegate object, can be either an object attached to the scope (when using AngularJS) or a normal JavaScript variable. Optional

Discussion #