Hello, I have landed up with an odd problem that I can’t quite figure out how to solve gracefully.
I have a collection-repeat list with infinite scrolling like so:
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMore()" distance="2%">
</ion-infinite-scroll>
In other words, if I am at 2% towards the end of the list, I trigger the loadMore() which does an http.get to load the next page. This is quite a large list and one can have over 500 pages.
Everything works beautifully, except I added a ‘search’ to my list. To accommodate the search, my collection-repeat now looks like:
<ion-item collection-repeat="event in events| filter:search.text">
...code
</ion-item>
Note the filter:search.text
And here is the problem:
When I am ‘infinite scrolling’ with a filter applied, its possible that I hit the end of the list, my loadMore() function gets called, that returns the next page, but my search criteria filters out all the records of the next page as well, which means my list does not grow, so I’m still at the end 2% and off loadMore() goes loading the next page on and on and on, till either the list increases to a point I am not at 2% or I hit the end of the http.gets
Ouch. I don’t want this behavior. So I’m thinking of two options:
a) The best option would be if I somehow detected if the user physically down-swiped and only then do loadMore() --> I looked at ionic gestures, but am not sure if that is a reliable way to go. IF I go this route, I guess I’ll have to check on ‘down swipe’ for each list item as the user may be scrolling at any point since its a list of many items (Edit: It doesn’t look like on-swipe-up/down works with a collection list – the function is not called)
b) If there is a filter text specfiied, I disable infinite scrolling
Any other thoughts?