Material angular 使用 $http 请求无限滚动

Question

我正在使用 Angular Material 的 md-virtual-repeat 指令进行无限滚动，我需要用 $http 请求替换它的 demo $timeout 函数。但我无法找到正确的解决方案。在下面的代码中，无限滚动工作正常但不显示来自 http 请求的数据。问题是我不知道如何将 $http 结果绑定到 infiniteItems。

Here 是个笨蛋。

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 1

这个有效：

plnkr

getItemAtIndex 返回索引而不是项目
如果你检查了你推送的内容，你会在我的 plunkr 的第 33 行看到 I 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_;
                      }));
                  }
              }
          }
      })
})();

Answer 2

在每个 api 调用中尝试获取数据库是否有更多记录。并在 fetchMoreItems_ 函数中添加该条件。

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

在我们的代码中，我们得到了像

这样的细节

sCurrentPage : 3
sMore: true ==>>这表示之后数据库有更多记录或没有获取页面数据。
总页数：4
sTotalRecords : 36

Answer 3

来到这里看到了@alessandro-buggin 的回答，这很有帮助。不得不稍微改一下，所以想到分享给别人帮忙。我需要：

避免在已经恢复数据时收到滚动请求（使用 this.hold）
从后端接收到全部数据后停止请求（使用 this.stop_）
在加载时隐藏内容，以避免出现故障或空元素（再次使用 this.hold）。在视图中，您需要对该元素使用 ng-hide，因为 ng-if 避免该元素存在，因此它不会在第一次加载。
当 parameters/filters 从外部表单更改时，实施刷新方法以重新加载数据。

远非完美，但效果很好。

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

注：我的服务returns一个对象组成如下： obj = {elements: INTEGER, data: ARRAY} 其中元素告诉您完整查询的长度。

Material angular 使用 $http 请求无限滚动

Material angular infinite scroll with $http request

javascript

angularjs

angular-material