角度のあるリモートサーバから無限のスクロール

私はイオン角度のプロジェクトに取り組んでいます。無限のスクロールを実装するセクションがあり、下にスクロールするとデータが表示されます。角度のあるリモートサーバから無限のスクロール

私が気づいたことは、何らかの形でデータが事前に設定され、非表示になり、ユーザーがページの一番下に来たときに出てくるのを待っていることです。他のフィードを読み込むためのサーバーへの呼び出しは行われないので、一度に5レコードを表示しています。

phpスクリプトから、私はjsonに変換しました。私は60行あり、クロムコンソールからは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>

出典

2016-07-14 user6579134

と、彼らは最後の項目に到達したときに最初の項目が表示されますと、電気ショック療法,,, 、ect ,,,？すなわちitem1、item2、item3、item1、item2、item3？ –

あなたがより良い実行するための角度改ページディレクティブを使用することができるよりも、あなたは、クライアント側での全データを持っている場合経験。

このようにしてください。

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あなたは、ユーザーがページを下にスクロールしたいの下に私にとっては

出典

2016-07-20 17:28:44 Deep

私はちょっと混乱している、それは答えがページネーションに基づいているようだが、私は無限のスクロールについて話している – neiza

更新を確認してください – Deep

角度のあるリモートサーバから無限のスクロール

答えて

関連する問題