Бесконечная прокрутка с использованием md-virtual-repeat в материале AngularJS

Я пытаюсь реализовать бесконечную прокрутку, как описано здесь: https://material.angularjs.org/latest/demo/virtualRepeat

Однако все примеры, которые я нашел, используют $http.get для запроса внешнего документа .json. Я хочу использовать существующий массив JSON, хранящийся в области, полученной другой функцией в контроллере. Чтобы упростить задачу для целей тестирования, я создал plunkr, который выполняет только базовые функции.

Вот рабочий пример, который я нашел с использованием внешнего файла .json: http://plnkr.co/edit/e32qVQ4ECZBleWq2Gb2O?p=preview

Все, что мне нужно сделать, это заменить код запроса $http.get моим $scope.items, но мои попытки не увенчались успехом. Вот мой модифицированный пример, над которым я работал: http://plnkr.co/edit/S2k6pxJ2mZ7MQsILnmvS?p=preview

(function () {
'use strict';
angular
  .module('infiniteScrolling', ['ngMaterial'])
  .controller('AppCtrl', function ($timeout,$scope) {
      $scope.items = [
{
"categoryId": "cat1",
"id": "pack0"
},
{
"categoryId": "cat1",
"id": "pack8"
},
{
"categoryId": "cat1",
"id": "pack9"
},
{
"categoryId": "cat1",
"id": "pack10"
},
{
"categoryId": "cat1",
"id": "pack11"
}
];


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

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

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

          fetchMoreItems_: function ($scope, index) {
              if (this.toLoad_ < index) {
                  this.toLoad_ += 5;
                  $scope.items.then(angular.bind(this, function (obj) {
                      this.items = this.items.concat(obj.data);
                      this.numLoaded_ = this.toLoad_;
                  }));                  

                  }
          }
      };

   });
})();

javascript angularjs angularjs-material
person Andy Mummau    schedule 13.01.2018    source источник
comment
Очень хорошо поставленный вопрос, но вы не можете просто добавить массив вместо чего-то, что было обещанием, работая над решением здесь... интересно, вы застряли на этой версии углового материала или я/вы должны посмотреть на решить эту проблему с более новой версией.   -  person shaunhusain    schedule 13.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

http://plnkr.co/edit/GUvhluPx3bS2XUSjFHvN?p=preview

Поскольку вы пытаетесь заменить вызов $http.get, который возвращает обещание, вы можете просто заменить его на $timeout (так как это также возвращает обещание и вызовет $apply). Единственным другим предостережением является то, что объект, который возвращает $timeout, не имеет свойства данных (это только функция httppromise, поскольку он имеет статус http и т. д.), поэтому мне также пришлось изменить obj.data на obj

person shaunhusain    schedule 13.01.2018