Infinite scroll with $http get in ionic framework

Question

I just need to do an ajax infinite scroll in my application, so I used infinite scroll in ionic framework.

My jquery controller code.

$scope.moredata = false;
$scope.page = 1;
$scope.loadMoreData=function()
{
  $http.get('someurl?page='+$scope.page).
    success(function(data, status, headers, configure) {
        $scope.$broadcast('scroll.infiniteScrollComplete');
        $scope.page += 1;
        $scope.product = data;
    }).
    error(function(data, status, headers, config) {
        alert("error");
    });
};

My html code.

<ion-content>
    <ion-list>
        <ion-item class="item item-thumbnail-left" ng-repeat="(key,value) in product" href="#/app/playlists/{{playlist.id}}">
            <img ng-src={{value.image_url}}>
            <h2>{{value.name}}</h2>
            <p>Sku : {{value.sku}}</p>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll distance="20%" on-infinite="loadMoreData()" ng-if="!moredata"></ion-infinite-scroll>
</ion-content>

When i used the above code i got page1 values from the server and it is added in my ion-list but when i scroll down the page2 request send and i got response but the listview is not added its is overriding and also the scroll event doesn't stops it calls to the page3, page4 and so on without going to the end of the screen.

Can any one help me how to use the infinite scroll in ionic framework to get data from server dynamically by page wise and append the response while scrolling at the end.

Thanks in advance.

Answer 1

Your problem is in that line :

  $scope.product = data;

You are not merging results but overiding your results. As I don't know how your data are build, it's difficult to suggest you a method to merge

You can see that post here for some suggestion : https://stackoverflow.com/a/17243064/3687474