I recently created a webpage with an infinite scroll page load more script using Ionic AngularJS. However, I encountered an issue where the page restarts from the beginning once it reaches the bottom.
Below is the HTML code snippet:
<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 here is the JavaScript code snippet:
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 = [];
});
Please review the full code example on CodePen: http://codepen.io/gauravcoder/pen/dGZbZK?editors=101