材料角度无限滚动与$http请求

这个有效：

plnkr

• getItemAtIndex返回的是索引，而不是项
• 如果你检查一下你推的内容，你会在我的推文中的第33行看到，我插入了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;

在我们的代码中，我们得到了类似的详细信息

• s当前页面：3
• sMore：true===>>这表示数据库在之后是否有更多记录获取逐页数据
• s总计页数：4
• s记录总数：36

来到这里，看到@alessandro bug的回答，这非常有帮助。我不得不稍微改变一下，所以我想把它分享给其他人来帮助我。我需要：

• 以避免在已经恢复数据的情况下（使用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}，其中元素告诉您完整查询的长度。