无限滚动完全填充而不是增量填充

Question

我正在尝试使用我找到的示例在我的网页上创建无限滚动。但是，页面完全填满了所有项目，而不是一次只显示几个项目。换句话说，它没有进行无限滚动。我注意到在一些示例中，他们分块解析数据，但在现实世界中，你应该如何做到这一点？ 下面是我的html代码：

 <table class="table table-striped table-bordered"><tr>

            <th style="text-align:center;">User ID</th> <th>Username</th><th>Rank</th>
            <th>Posts</th><th>Likes</th> <th>Comments</th> <th>Flags</th><th>Status</th><th>Action</th></tr>
            <tr><td class="center">
                     <div ng-app='scroll' ng-controller='Scroller'>  
                       <div  when-scrolled="loadMore("")">  
                        <div  ng-repeat='item in items'>
                    <span>{{item.id}} 
                    <span style="position:absolute;left:140px;">{{item.username}}</span> 
                    <span style="position:absolute;left:290px;">{{item.rank}}</span> 
                    <span style="position:absolute;left:360px;">{{item.posts}}</span> 
                    <span style="position:absolute;left:440px;">{{item.likes}}</span>  
                    <span style="position:absolute;left:530px;">{{item.comments}}</span> 
                    <span style="position:absolute;left:640px;">{{item.flags}}</span>
                    <span class="label label-success" style="position:absolute;left:710px;">Active</span>
                    <a style="position:absolute;left:790px;" class="btn btn-info" style="width:30px" ng-href='/admin/userDetail?userid={{item.id}}'> 
                                    View Detail</a>
                                        <hr> 

                    </div>  

              </div>
            </div>  
          </td></tr>
        </table>  

下面是我的 angularjs 代码：

   function Scroller($scope, $http, $q, $timeout) {

   $scope.items = [];
   var lastuser = '999999';
 $scope.loadMore = function(type) {      

    todate = document.getElementById("charttype").value;
      var url = "/admin/getusers?type=" + todate + "&lastuser=" + lastuser;      
    var d = $q.defer();
    $http({
        'url': url,
        'method': 'GET'
    })
        .success(function (data) {

   var items = data.response;     
   for (var i = $scope.items.length; i < items.length; i++) {
         $scope.items.push(items[i]);
         count++;
         if (count > 100) 
         {
             lastuser = $scope.items[i].id;
             break;
         }  

   d.resolve($scope.items);       
    d.promise.then(function(data) {                            
     });         
 }   
 )
   .error(function (data) {
    console.log(data);
 });         
return d.promise;       
}; 
   $scope.loadMore();
  }

angular.module('scroll', []).directive('whenScrolled', function() {
 return function(scope, elm, attr) {
     var raw = elm[0];
     alert("scroll");
     elm.bind('scroll', function() {
         if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
             scope.$apply(attr.whenScrolled);
         }
     });
 };
});

我的问题是为什么我的网页最初显示所有 3200 行而不是让我进行无限滚动。你会注意到我在滚动模块中放了一个警报，它从不显示。我必须增量读取我的数据库吗？任何帮助表示赞赏。

Answer 1

您将从 API 调用返回的所有项目添加到 $scope.items。

for (var i = 0; i < items.length; i++) {
     $scope.items.push(items[i]);
}

您不想只添加这些项目的子集吗？

附：如果您创建 Plunkr 来显示具体问题，可能会有所帮助。

编辑： 根据您对该指令不起作用的评论，我将this Plunkr 放在一起，这是您的代码的副本，但 $http get 代码被撕掉了。 “滚动”警报在这里触发。我认为您只是在 for 循环中缺少了一个右括号（因为我没有要测试的 API 端点，所以我实际上无法实时运行您的代码）。

编辑 2： 我不确定为什么您没有看到该功能在滚动时正确触发。我已经设置了another plunker，我在其中更改了滚动事件触发的结果以显示警报并从数据变量中加载更多项目，因此您可以看到滚动事件正在正确触发并且它将加载更多项目.