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.

Where are you testing this ? Emulator, browser (With ripple or not ?), directly on a device ? — Guillaume Munsch
– Guillaume Munsch, Commented Jun 12, 2015 at 8:51
Launch ionic serve in the project folder (through console). It'll launch it in a browser. We'll see hat happens tough — Guillaume Munsch
– Guillaume Munsch, Commented Jun 12, 2015 at 8:54
i got cross origin error when i use ionic serve in firefox browser :/ — PraveenKumar
– PraveenKumar, Commented Jun 12, 2015 at 9:02

Community · Accepted Answer · 2017-05-23 12:31:08Z

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

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Jun 12, 2015 at 11:23

aorfevre

5,0744 gold badges23 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Infinite scroll with $http get in ionic framework

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related