бесконечный прокрутка с удаленного сервера с угловым

Я работаю над ионным угловым проектом. Там есть раздел, где я реализую бесконечный прокрутки, и когда я прокручиваю нижнюю часть, я вижу, что данные появляются.бесконечный прокрутка с удаленного сервера с угловым

Я понял, что данные как-то предварительно заполняются и скрываются, ожидая появления, когда пользователь дойдет до нижней части страницы. Поскольку сервер не загружает другие загрузки, я показываю по 5 записей за раз.

Из сценария php я перешел в json. У меня есть 60 строк, а с хром-консоли я прочитал длину json равным 60, то есть все 60 строк загружены, поскольку данные уже заполнены.

Есть ли способ, чтобы я мог показывать по 5 записей за раз, а затем, когда пользователь прокручивается в нижнюю часть, он передает последний идентификатор, так что вызов будет сделан на сервер для загрузки каналов?

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

бесконечный прокрутка с удаленного сервера с угловым

ответ

Смежные вопросы