Another Infinite Scroll issue

ionic-v1
1

Hi, I’m new to ionic and angular, and i’m trying to make an infinite scroll image gallery for an android app.
This is my problem, First I retrieve an array of object from an API, then make an empty array to push 6 objects at a time, this is array is used in the ng-repeat directive. But the Infinite Scroll function never stops.
sometimes it stops at half of the lenght of my original array, but the spinning circles do not dissapear until scrolling to the bottom of the page.
Also I’m using bootstrap 3,
Can you help me with this.

Controller:

.controller('HomeCtrl', function($scope, ImagesFactory) {
	 $scope.noMoreItemsAvailable = false;


	  ImagesFactory.getAll().success(function(data) {
         $scope.allimages = data.data;
         $scope.images = [];

			//Fill the array with the first 6 objects
			for (var i = 0; i < 6; i++) {
			            $scope.images.push($scope.allimages.shift());
			        }        

			$scope.loadMore = function() {
			     console.log('LoadMore --');
			 
			        for (var i = 0; i < 6; i++) {
			            $scope.images.push($scope.allimages.shift());
			            console.log('i:'+i);
			        }        
			       
			        $scope.$broadcast('scroll.infiniteScrollComplete');
			        console.log('lenght: '+$scope.images.length);
			          if($scope.images.length > 70)
			            $scope.noMoreItemsAvailable = true;

			 	console.log('loop finisher:'+ $scope.noMoreItemsAvailable);	
		        $scope.$broadcast('scroll.infiniteScrollComplete');
		    };


		  $scope.$on('stateChangeSuccess', function() {
		  	$scope.loadMore();
		  });

      });

})

HTML Template:

<ion-view title="Home">
  <ion-content class="has-header padding ">

   <div class="content">
    <div class="container">
     <div class="photos col-lg-6 col-md-6 col-xs-6 portfolio-item" ng-repeat="img in images"> s
	       <a href="#/tab/post/{{img.post_id}}">
	   			<img class="img-responsive" ng-src="{{img.path}}" alt="lol">
	   			<span class="menu_desc">{{img.desc}} </span>	
	   			<span class="menu_label">{{img.title}} </span>
	   	   </a>

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

Can you throw this into a codepen demo?

3

Here it is, it’s a bit modified, but the problem is the same

4

The structure of things were a bit off. You had your ion-infinite-scroll inside the item, plus your code need to be reorganized.

http://codepen.io/mhartington/pen/wKqhG