CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
saurav
saurav

Reputation: 487

angular js infinite scroll issue using ionic

i made page with infinite scroll page load more script i am using ionic angular js for my code issue is that when page reaches bottom it restart from begning

below is html code: 

<ion-content class="has-header">

<ion-list>
    <ion-item ng-repeat="item in items">
      Item : {{ item.username }}
    </ion-item>

</ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

</ion-content>

and js code 

angular.module('ionicApp', ['ionic'])
    .controller('MyCtrl', function($scope,$http) {
         $scope.noMoreItemsAvailable = false;

          $scope.loadMore = function() {

            $http.get('http://serverurl/a.php?page='+$scope.items.length).success(function(items) { 
                //$scope.username = items;
                $scope.items = items;
                //$scope.items.push(items);
                console.log(items)
                $scope.$broadcast('scroll.infiniteScrollComplete');
            });

          };

          $scope.items = [];
    });

pls check code on codepen : http://codepen.io/gauravcoder/pen/dGZbZK?editors=101

Upvotes: 0

Views: 237

Answers (1)

Sambhav Gore
Sambhav Gore

Reputation: 565

Your controller is making just two requests page 0 or page 10. Because you are checking length.

Here is a slightly modified code which kind of works, but you should implement pagination in a little better way. This is just a working code to give you some idea:

Plunker link - http://codepen.io/gauravcoder/pen/obovaP

angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope,$http) {
$scope.noMoreItemsAvailable = false;
$scope.currentPage = 0;

  $scope.loadMore = function() {
    if($scope.currentPage == 3) {
       //no more items
       $scope.$broadcast('scroll.infiniteScrollComplete');
        $scope.noMoreItemsAvailable = true;
       return;
    }

    $http.get('http://serverurl/a.php?page='+$scope.currentPage).success(function(items) { 
$scope.currentPage += 1;
        //$scope.username = items;
        $scope.items = $scope.items.concat(items);
        //$scope.items.push(items);
        console.log(items)
        $scope.$broadcast('scroll.infiniteScrollComplete');
    });

  };
$scope.items = [];
});

Also note that since you have only 3 pages, you should add a check for that as well.

Upvotes: 2

Related Questions