AngularJS Ionicframework infinite scroll GET REQUEST a list 10 at a time

Question

I'm trying to implement an ion-infinite-scroll using the ionic framework, I have a REST API that allows me set the index to get request a range.. my Service looks like this, where begin in end are indexes.

this.GetUserRatings = function (id, begin, end) {
            return $http.get($rootScope.endPoint + '/user/' + id + '/ratings/'+ begin + '/' + end);
        };  

When the page reloads initially i want 10 items in the list so in my controller it would go like this..

 UserService.GetUserRatings($stateParams.id, 1, 10)
        .success(function (data) {
          $scope.userRatings = angular.fromJson(data);
          }).error(function(error) {
                    //do something
        });

As I scroll down the list, I want my ion-infinite-scroll to get the next 10 items (11 - 20) and the next (21 - 30) and so on.. So how do i do that?

$scope.loadMore = function() {

   // UserService.GetUserRatings($stateParams.id, ?, ?)
   // $scope.ratings.push({...}); I'm guessing this will be in the success 
   //also how to know if no more results
    $scope.$broadcast('scroll.infiniteScrollComplete'); 
  };

  $scope.ratings = [];

In the view it goes like this..

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

Answer 1

Basicly, you are updating $scope.userRatings, so I'd use something like that which consist of :

• first getting next items

• then adding those items to your list. Note that I suggest a merge method but without more info on your data structure, it is hard to suggest something appropriate.

• I don't know how you can get noMoreResults to true, but you may know when to intantiate it ;)

.

 var _loopItems = 10;
 $scope.loadMore = function() {
   var _curLength = $scope.userRatings.length;

   UserService.GetUserRatings($stateParams.id, _curLength  , _curLength  + _loopItems ).success(function (data) {
      $scope.userRatings = angular.merge($scope.userRatings, angular.fromJson(data)); // AS I DON T KNOW YOUR DATAS, IT S HARD TO TELL HOW TO MERGE THOSE VALUES
      }).error(function(error) {
                //do something
    });

    $scope.$broadcast('scroll.infiniteScrollComplete'); 
  };

EDIT : As your response is like that :

[{id:1, userid:1, rating_num:5, rating_text:"foo"},{id:2, userid:2, rating_num:5, rating_text:"foo"}]

I suggest changing the merge with the follwoing :

data = angular.fromJson(data);
for (var i =0; i< data.length; i++){
  $scope.userRatings.push(data[i]);
}