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]);
}

您是否只想添加这些项目的子集？

P.S。如果您创建Plunkr以显示特定问题，可能会有所帮助。

修改根据您对该指令不起作用的评论，我将this Plunkr放在一起，这是您的代码的副本，但是$ http获取代码已被删除。这里有“滚动”警报。我认为你刚刚在你的for循环中错过了一个结束括号（因为我没有你的API端点进行测试，我实际上无法实时运行你的代码）。

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

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

1 个答案: