A.M A.M - 6 months ago 452
AngularJS Question

Material angular infinite scroll with $http request

I'm using

md-virtual-repeat
directive of
Angular Material
to have an infinite scroll, and I need to replace it's demo $timeout function with a $http request. But I can't get to the right solution.
In the code below, infinite scroll works fine but doesn't show the data from http request. The problem is that I don't know the way of binding $http result to infiniteItems.

Here is the plunker.

Index.html

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


JS:

(function () {
'use strict';
angular
.module('infiniteScrolling', ['ngMaterial'])
.controller('AppCtrl', function ($timeout,$scope,$http) {
this.infiniteItems = {
numLoaded_: 0,
toLoad_: 0,
items:[],
getItemAtIndex: function (index) {
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}
return index;
},
getLength: function () {
return this.numLoaded_ + 5;
},
fetchMoreItems_: function (index) {
if (this.toLoad_ < index) {
this.toLoad_ += 20;

$http.get('items.json').success(function (data) {
var items = data;
for (var i = 0; i < items.length; i++) {
this.items.push(items[i].data);
}
this.numLoaded_ = this.toLoad_;
}.bind(this));
}
}
};
});
})();

Answer

This one works:

plnkr

  • getItemAtIndex returned the index and not the item
  • if you inspected what you pushed, you'd see that at line 33 in my plunkr I concat obj.data, not plain obj
(function () {
    'use strict';
    angular.module('infiniteScrolling', ['ngMaterial'])
      .controller('AppCtrl', function ($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_;
                      }));
                  }
              }
          }
      })
})();