Matériel angulaire infini défilement avec $requête http

Celui-ci fonctionne:

plnkr

• getItemAtIndex retourné l'index et non pas l'élément
• si vous inspectés ce qui vous a poussé, vous pouvez voir à la ligne 33 à mon plunkr je concat obj.data, pas plaine 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_;
                      }));
                  }
              }
          }
      })
})();

est venu ici et j'ai vu @alessandro-buggin réponse qui a été très utile.
J'ai dû changer un peu, j'ai donc pensé à partager pour les autres pour les aider. J'avais besoin:

• pour éviter de se faire défiler les demandes alors que déjà la récupération de données (à l'aide de this.hold)
• arrêt demandes lorsque l'ensemble des données a été reçu depuis le backend (à l'aide de this.stop_)
• cacher le contenu pendant le chargement, pour éviter des problèmes ou des éléments vides (de nouveau à l'aide de this.hold). Sur la vue que vous avez besoin d'utiliser ng-hide sur cet élément parce que ng-if éviter que l'élément ne jamais exister, donc il ne charge pas la première fois.
• mise en œuvre d'une méthode d'actualisation pour recharger des données lorsque les paramètres/filtres changé à partir d'un à l'extérieur de la forme.

Loin d'être parfait, mais fonctionne assez bien.

vm.elements = null;
vm.infiniteItems = { //Start of infinte logic
stop_: false,
hold: false,
numLoaded_: 0,
toLoad_: 0,
items: [],
refresh: function() {
this.stop_ = false;
this.hold = false;
this.numLoaded_ = 0;
this.toLoad_ = 0;
this.items = [];
},
getItemAtIndex: function (index) {
if (!this.hold) {
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}
}
return this.items[index];
},
getLength: function () {
if (this.stop_) {
return this.items.length;
}
return this.numLoaded_ + 5;
},
fetchMoreItems_: function (index) {
if (this.toLoad_ < index) {
this.hold = true;
this.toLoad_ += 5;
var start = this.numLoaded_;
if (start > 0) start++;
MyService.getData(parameters)
.then(angular.bind(this, function (obj) {
if (obj && obj.elements > 0) {
vm.elements = obj.elements;
this.items = this.items.concat(obj.data);
if (obj.elements < this.toLoad_) {
this.stop_ = true;
}
this.numLoaded_ = this.items.length;
this.hold = false;
} else { //if no data
vm.elements = 0;
}
}));
}
}
} //End of infinte logic

Note: mon service retourne un objet composé comme ceci:
obj = {elements: INTEGER, data: ARRAY} où les éléments vous indique la longueur de la requête complète.