[Resolved by Myself] Ion-infinite-scroll keep on calling the method of on-infinite

ionic-v1
1

I’ve been working on this infinite scroll for the past few days and i managed to get older posts via $http get. However, i encountered issues in both Try 1 and 2 below. I’m kinda loss now…

I take reference from these 2 sites mainly.
[Issue Beta.14: ion-infinite-scroll keep on calling the method of on-infinite][1]
[ionic framework infinite scroll with http get data][2]
[1]: [Resolved] Issue Beta.14: ion-infinite-scroll keep on calling the method of on-infinite
[2]: http://stackoverflow.com/questions/26414326/ionic-framework-infinite-scroll-with-http-get-data

Here are my codes:

Try 1: The infinite scroll keeps on going forever even when there are no more older posts.

In HTML

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

In Controller

.controller ('MyController', function($scope, $http) {
	$scope.posts = [];
	$scope.page=1;
	//$scope.noMoreItemsAvailable = false;
	
	$scope.loadMore = function() {
		$http.get('http://alternary.com/demo/dbxapp/wp-json/posts?page='+$scope.page).success(function(items) {
			var i = items.length;
			//document.write(i);
			
			$scope.posts = $scope.posts.concat(items);
	
			$scope.posts.push(items);
			console.log(items);
			$scope.$broadcast('scroll.infiniteScrollComplete');
			//$scope.noMoreItemsAvailable = true;
			console.log($scope.page);
			$scope.page +=1;	
			
			
		});
	};
})

Try 2: I used $scope.noMoreItemsAvailable but now the infinite scroll did not work. No older post is retrieved.

In HTML (no changes)

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

In Controller

.controller ('MyController', function($scope, $http) {
	$scope.posts = [];
	$scope.page=1;  	
        $scope.noMoreItemsAvailable = false;

	
	$scope.loadMore = function() {
		$http.get('http://alternary.com/demo/dbxapp/wp-json/posts?page='+$scope.page).success(function(items) {
			var i = items.length;
			//document.write(i);
			
			$scope.posts = $scope.posts.concat(items);
	
			$scope.posts.push(items);
			console.log(items);
			$scope.$broadcast('scroll.infiniteScrollComplete');
			$scope.noMoreItemsAvailable = true;
			console.log($scope.page);
			$scope.page +=1;	
			
			
		});
	};
})
2

Resolved by myself and it works now…

.controller ('MyController', function($scope, $http, $ionicLoading) {
	$scope.posts = [];
	$scope.page=1;
	$scope.noMoreItemsAvailable = false;
	
	$scope.loadMore = function() {
		$http.get('http://alternary.com/demo/dbxapp/wp-json/posts?page='+$scope.page).success(function(items) {
			var i = items.length;
			//document.write(i);
			
			if(i!=0)
			{
			
				$scope.posts = $scope.posts.concat(items);
	
				$scope.posts.push(items);
				//console.log(items);
				$scope.$broadcast('scroll.infiniteScrollComplete');
				//$scope.noMoreItemsAvailable = true;
				//console.log($scope.page);
				//document.write($scope.page);
				$scope.page +=1;
			}
			else
			{
				$scope.noMoreItemsAvailable = true;			
			}
			
			
		});
	};
})
1 Like