Reset ion-infinite-scroll

ionic-v1
1

Hi,
is there a way to reset ion-infinite-scroll?
I’m using a collection-repeat list and have ion-infinite-scroll below it.

<ion-infinite-scroll ng-if="hasMore" on-infinite="loadMore()" 
    distance="451px" > </ion-infinite-scroll>

My problem:
I have a checkbox above the list, which shall filter the list (or better: clear the list and start reloading with some filter option)

So when the checkbox is clicked, I’m emptying the list array and set hasMore to true again. However, infinite-scroll is not triggered.

If I do not empty the list, but add some dummy objects (enough that it exceeds the page by a few px) infinite-scroll is triggered correctly, but this is not a solution.

Any idea how to force infinite-scroll to work again?

Thanks!

2

I have a similar problem. I also have a textbox above the list. When I reach the end of a list, the infinite-scroll not work for the next list of the new search, only showed the first page. If I search before reach the end of current list the infinite-scroll its works well.

it’s posible reset the ion-infinite-scroll??

3

use it with DIV as mentioned bellow

<div infinite-scroll=‘onScrollFunction()’ infinite-scroll-disabled=‘DissableScrollExpression’ infinite-scroll-distance=‘1’>

</div>

4

Exchanged this:

<ion-infinite-scroll
    ng-if="hasMore"
    on-infinite="loadMore()"
    distance="451px"
>
</ion-infinite-scroll>

with this:

<div 
    infinite-scroll="loadMore()" 
    infinite-scroll-disabled="!hasMore" 
    infinite-scroll-distance="451px"></div>

but that doesn’t work at all. Not sure how you think this should be working. Talking about ionic 1 here…

5

does Your hasMore value properly updated to stop the scroll. I have successfully implemented with this logic. I can can help you if codepen your problem

6

I don’t know what Ionic version you are talking about, but my version has following definiton:

IonicModule
.directive('ionInfiniteScroll', ['$timeout', function($timeout) {
  return {
    restrict: 'E',
    ....

Which restricts the directive to “Tag Name” (<ion-inifinite-scroll>). It does not allow attribute name (<div infinite-scroll="...">).
I have no idea why you think this should work.

7

Seems like I found a solution:

After resetting the data array you can just fire the scroll complete event again, and it will start loading:

$scope.reset = function reset() {
   // reset the data model, reset the ng-if condition:
   $scope.upcoming = [];
   $scope.hasMoreUpcoming = true;
   // broadcast complete event, which will trigger reloading:
   $scope.$broadcast('scroll.infiniteScrollComplete');
}