Igor Simic
8 years ago

How to add infinite scroll in Angular Material using virtual repeat
InfiniteScroll
Angular
Material Design
ngInfiniteScroll


index html:
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc1/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
  <link rel="stylesheet" href="style.css" />

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc1/angular-material.min.js"></script>

  <script src="script.js"></script>
  
</head>
<body ng-app="infiniteScrolling" class="virtualRepeatdemoInfiniteScroll">
 
    <div ng-controller="AppCtrl as ctrl" ng-cloak>
        <md-content layout="column">
          <md-virtual-repeat-container id="vertical-container" flex>
                <div md-virtual-repeat="item in ctrl.infiniteItems" md-on-demand
                     class="repeated-item" flex>
                    {{item.id}}
                </div>
            </md-virtual-repeat-container>
        </md-content>
    </div>
    
</body>
</html>

items.json
[
  {
    "categoryId": "cat1",
    "id": "pack0"
  },
  {
    "categoryId": "cat1",
    "id": "pack8"
  },
  {
    "categoryId": "cat1",
    "id": "pack9"
   },
  {
    "categoryId": "cat1",
    "id": "pack10"
  },
  {
    "categoryId": "cat1",
    "id": "pack11"
  }
]


script.js
(function () {
    'use strict';
    angular
      .module('infiniteScrolling', ['ngMaterial'])
      .controller('AppCtrl', function ($timeout,$scope,$http) {
          // In this example, we set up our model using a plain object.
          // Using a class works too. All that matters is that we implement
          // getItemAtIndex and getLength.
           var vm = this;
          vm.infiniteItems = {
              numLoaded_: 0,
              toLoad_: 0,
              items: [],

              // Required.
              getItemAtIndex: function (index) {
                  if (index > this.numLoaded_) {
                      this.fetchMoreItems_(index);
                      return null;
                  }
                  return this.items[index];
              },

              // Required.
              getLength: function () {
                  return this.numLoaded_ + 5;
              },

              fetchMoreItems_: function (index) {
                  if (this.toLoad_ < index) {
                      this.toLoad_ += 5;
                      $http.get('items.json').then(angular.bind(this, function (obj) {
                          this.items = this.items.concat(obj.data);
                          this.numLoaded_ = this.toLoad_;
                          console.log(this)
                      }));
                  }
              }
          };

       });
})();

style.css

.virtualRepeatdemoInfiniteScroll #vertical-container {
    height: 292px;
    width: 400px;
}

.virtualRepeatdemoInfiniteScroll .repeated-item {
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    height: 40px;
    padding-top: 10px;
}

.virtualRepeatdemoInfiniteScroll md-content {
    margin: 16px;
}

.virtualRepeatdemoInfiniteScroll md-virtual-repeat-container {
    border: solid 1px grey;
}

.virtualRepeatdemoInfiniteScroll .md-virtual-repeat-container .md-virtual-repeat-offsetter {
    padding-left: 16px;
}