Материальная угловая бесконечная прокрутка с запросом $http

Этот работает:

plnkr

• getItemAtIndex вернул индекс, а не элемент
• если бы вы проверили, что вы нажали, вы бы увидели, что в строке 33 в моем plunkr я concat obj.data, а не обычный 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_;
                      }));
                  }
              }
          }
      })
})();

При каждом вызове API пытайтесь узнать, есть ли в БД еще несколько записей или нет. и добавьте это условие в функцию fetchMoreItems_.

fetchMoreItems_: function (index) {
              if (this.toLoad_ < index && hasMoreRecords) {
                  this.toLoad_ += 5;

В нашем коде мы получаем такие детали, как

• sCurrentPage : 3
• sMore: true ==>> это указывает, что в БД есть больше записей или нет после выборки постраничных данных.
• Всего страниц: 4
• sTotalRecords: 36

пришел сюда и увидел ответ @alessandro-buggin, который был очень полезным. Мне пришлось немного изменить его, поэтому я решил поделиться им с другими, чтобы помочь. Мне было нужно:

• чтобы избежать получения запросов на прокрутку при уже восстановленных данных (используя this.hold)
• остановка запросов, когда все данные были получены от бэкэнда (используя this.stop_)
• скрытие содержимого при загрузке, чтобы избежать сбоев или пустых элементов (опять же с помощью this.hold). В представлении вам нужно использовать ng-hide для этого элемента, потому что ng-if избегайте существования элемента, поэтому он не будет загружаться в первый раз.
• реализация метода обновления для перезагрузки данных при изменении параметров/фильтров из внешней формы.

Далеко не идеально, но работает довольно хорошо.

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

Примечание: моя служба возвращает объект, составленный следующим образом: obj = {elements: INTEGER, data: ARRAY} где elements сообщают вам длину полного запроса.