角度負荷の無限スクロールx各ユーザーのデータ量下からスクロール

Question

私のアプリでは無限のスクロールを実装しようとしていますが、難しかったです。現在私のjsonファイルには30個のレコードがあり、ページが読み込まれると、すべてのデータがデータに表示されます。私が達成したいのは、ページの読み込み時に表示されるのは、ユーザーが無限のスクロールを引き継ぎ、別の5つのデータを読み込み、繰り返し続けるbuttomにスクロールするときに、データの5つだけを表示することです。

HTML

<ion-content> 

     <div class="list card has-subheader" ng-repeat="item in feeds track by item.u_pic_id"> 

    <div class="item item-avatar"> 
    <img src="../usr_up_img/{{item.profile_pix}}"> 
    <h2><a class="mylinks" 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="../images/{{item.profile_pix}}"> 
    <p> 
     This is a "Facebook" styled Card. The header is created from a Thumbnail List item, 
     the content is from a card-body consisting of an image and paragraph text. The footer 
     consists of tabs, icons aligned left, within the card-footer. 
    </p> 

    <p> 
     <a href="#" class="subdued">{{item.love_total}} Loves</a> 
     <a href="#" class="subdued">{{item.com_total}} Comments</a> 
    </p> 
    </div> 

</div> 

<ion-infinite-scroll 
    on-infinite="loadmore()" 
    distance="1%"> 
    </ion-infinite-scroll> 


     </ion-content> 

JS

.controller('feedsctrl',['$scope','$http',function($scope,$http){ 
    $scope.feeds = []; 
    $scope.loadmore=function() { 
     var params = {}; 
     if($scope.feeds.length > 0) { 
      params['after']=$scope.feeds[$scope.feeds.length - 1].profile_id; 
      } 
$http.get('http://localhost/myapp/app_ion/feeds.php').success(function(data){ 
     $scope.feeds=console.log(data) ; 
     $scope.feeds=data; 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 

    }); 
    } 
}]) 

は、この作業を取得する方法上の任意のヘルプ？

Answer 1

は、あなたがより多くの助けを必要とする場合、これは

.controller('feedsctrl',['$scope','$http',function($scope, $http) { 
    $scope.items = []; 
    $scope.loadMore = function() { 
    $http.get('http://localhost/myapp/app_ion/feeds.php').success(function(items) { 
     $scope.items.push(items); 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
    }); 
    }; 
    $scope.$on('$stateChangeSuccess', function() { 
    $scope.loadMore(); 
    }); 

}]) 

これは、例えばhttp://codepen.io/elm/pen/Becqp でみてくださいdoc