从远程服务器无限滚动与角度

Question

我正在做一个离子角度项目。有一个部分我正在实现无限滚动，当我滚动到底部时，我看到数据出现了。

我意识到数据以某种方式预先填充和隐藏，等待用户到达页面底部时出现。因为没有调用服务器来加载其他提要，所以我一次显示 5 条记录。

从 php 脚本，我已转换为 json。我有 60 行，从 chrome 控制台读取 json 长度为 60，这意味着所有 60 行都已加载，前提是数据已经预先填充。

有没有一种方法可以一次显示 5 条记录，然后当用户滚动到底部时，它会传递最后一个 id，因此会调用服务器以加载提要？

JS：

.controller('feedsctrl',['$scope','$http',function($scope,$http){
$http.get('http://usefulsite.com/app/feeds.php').success(function(data){
       $scope.feeds= console.log(data); ;
       $scope.feeds=data;

       $scope.numberOfItemsToDisplay = 5; // Use it with limit to in ng-repeat
$scope.addMoreItem = function(done) {
    if ($scope.feeds.length > $scope.numberOfItemsToDisplay)
        $scope.numberOfItemsToDisplay += 5; // load number of more items
        $scope.$broadcast('scroll.infiniteScrollComplete')
});   

php

SELECT * FROM users order by fname asc

HTML

<ion-content overflow-scroll="false" has-bouncing="true">

        <div ng-controller="feedsctrl" class="list card has-subheader" ng-repeat="item in feeds | filter:scheduleSearch | limitTo:numberOfItemsToDisplay">

            <div class="item item-avatar">
                <img src="http://usefulsite.com/resize_image/images.php?image={{item.profile_pix}}&new_width=100&new_height=100">
                <h2><a class="names" href="#/tab/source/{{item.profile_id}}">{{item.fname}}&nbsp;{{item.lname}}</a></h2>
                <p>November 05, 1955</p>
            </div>

            <div class="item item-body">
                <img class="full-image" src="http://usefulsite.com/aoo/resize_image/images.php?image={{item.pic}}&new_width=800&new_height=800">
<p>{{item.fname}} {{item.lname}}</p>
            </div>

        </div>


        <ion-infinite-scroll

                on-infinite="addMoreItem()"
                distance="1%"
                ng-if="feeds.length > numberOfItemsToDisplay">
        </ion-infinite-scroll>

Answer 1

如果您在客户端拥有全部数据，则可以使用角度分页指令来获得更好的体验。

像这样试试。

var app = angular.module('plunker', []).controller('pagedController', function($scope) {

   $scope.numPerPage = 5;
   $scope.data = [];
  
$scope.items = [];
for (i=1;i<=60;i++) {
  $scope.items.push({ text:'item '+i});
}


  $scope.getMoreData = function () {
  $scope.data = $scope.items.slice(0, $scope.data.length + $scope.numPerPage);
  };
  
  $scope.getMoreData();
  
});

app.directive('infiniteScroll', function() {
return function(scope, elm, attr) {
    var raw = elm[0];
    
    elm.on('scroll', function() {
        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
            scope.$apply(attr.infiniteScroll);
        }
    });
};
});

 .itemContainer
 {
width: 150px;
height: 130px; 
border: thin solid black;
overflow-x: hidden;
overflow-y: scroll;
 }


 .item
 {
            
background: #f9f9f9;
font-family: verdana;
margin: 7px;
width : 110px;
  }

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="script.js"></script>
  </head>
  
  <body ng-controller="pagedController">
<h1>Infinite scroll</h1>
<h4>{{items.length}} items</h4>
<div class="itemContainer" infinite-scroll="getMoreData()">
<ul>
  <li ng-repeat="item in data" class="item">{{item.text}}</li>
</ul>
</div>

  </body>

</html>

Plunker：http://plnkr.co/edit/TJi4Um6a31fYsmVwtAmZ?p=preview