Ionic infinite scroll

Question

I am using wordpress as a backend for an app and I want to use infinite scroll but I am having trouble concatenating articles.

I am calling the service using a fact

Answer 1

Try this create a function infiniteScrollCompleteCancelLoadMore and call it when you want to complete the scroll and you have reached the end of your list.

function infiniteScrollCompleteCancelLoadMore() {
        $timeout(function () {
            $timeout(function () {
                $scope.$broadcast('scroll.infiniteScrollComplete');
                $rootScope.canLoad = false;
            });
        });
    }


$scope.loadMore = function() {
   Worlds.GetNewPosts().then(function (worlds){
      var loadedIdss = _.pluck($scope.worlds, 'id');
      var newItemss = _.reject(worlds, function (item){ 
         return _.contains(loadedIdss, item.id); 
   });
  $scope.worlds = newItemss.concat($scope.worlds);
  infiniteScrollCompleteCancelLoadMore() // CHANGE HERE  
  });
};

and your HTML

<ion-infinite-scroll on-infinite="loadMore()" ng-if="canLoad" distance="1%"
                         immediate-check="false"></ion-infinite-scroll>

OR call This is you just want to cancel loadMore loop.

function infiniteScrollComplete() {
        $timeout(function () {
            $timeout(function () {
                $scope.$broadcast('scroll.infiniteScrollComplete');
            });
        });
    }

Answer 2

ion-infinite-scroll works with some sort of paginated result and you seem to feed your list with all the results.

Your API should look something like this:

http://www.examplesite.com/tna_wp/wp-json/posts?filter[category_name]=international&filter[posts_per_page]=2&filter[page]=1

notice I've added a page filter.

and your service responsible to fetch the data should look something like this:

.factory('dataService', function($http) {
   return {
      GetPosts: function(page, pageSize) {
        return $http.get("http://mywebservice/api/test/posts/" + page + "/" + pageSize);
      }
   };
});

Your controller

.controller('mainController', function($scope, dataService) {

    $scope.posts = [];
    $scope.theEnd = false;

    var page = 0;
    var pageSize = 10;

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

    $scope.loadMore = function(argument) {
        page++;
        dataService.GetPosts(page, pageSize)
          .then(function(result) {
            console.log('items fetched: ' + result.data.length);
            if (result.data.length > 0) {
                angular.forEach(result.data, function(value, key) {
                  $scope.posts.push(value);
                });
            }
            else {
                $scope.theEnd = true;
            }
        })
        .finally(function() {
            $scope.$broadcast("scroll.infiniteScrollComplete");
        });
    };

})

would initialize an array of objetct - as you're doing - and a boolean which tells the directive ion-infinite-scroll when you've reached the end:

$scope.posts = [];
$scope.theEnd = false;

Then you can have some variables to control the pagination:

var page = 0;
var pageSize = 10;

I start loading when the view is loaded:

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

$scope.loadMore then would increment the page number:

page++;

and call the service layer:

dataService.GetPosts(page, pageSize)

when I've reached the end of the stream I would set the variable:

$scope.theEnd = true;

to let the directive know we don't have other items to append.

.finally(function() {
    $scope.$broadcast("scroll.infiniteScrollComplete");
});

finally is always called when the promise is resolved.

Instead of ng-repeat you can use collection-repeat which should be much faster.

You can play with it here.