CODEWITHSUNDEEP
angularjsionic-frameworkangularjs-ng-repeatinfinite-scroll
Eusthace
Eusthace

Reputation: 3861

Ionic/AngularJS Infinite scroll without call load more

I'd like to implement an infinite scroll, but without call a load more function everytime.

Let's think I've download an array of 1000 items from Parse. I'd like to show 10 items and then add more and more items to my list using ng-repeat from a local array.

I think the best solution is to implement a directive, but maybe there is something already done...

Anyone?

Upvotes: 0

Views: 1983

Answers (2)

LeftyX
LeftyX

Reputation: 35587

Matt's solution is perfectly fine. Especially considering you've mentioned you want to use ng-repeat and you want to paginate your result.

It doesn't seem to be a huge effort to implement what he's suggesting. The other option is to use collection-repeat, especially for performances.

The implementation is very simple:

<ion-content>
  <ion-item collection-repeat="item in items">
    {{item}}
  </ion-item>
</ion-content>

and you don't have to be worried about loading all the items together as the framework will be responsible to load chunks of information for you. The only drawback - as far as I am aware - is you cannot control the number of items you want to display.

Upvotes: 1

Matt Way
Matt Way

Reputation: 33151

Sure you could do it as a directive, but regardless, you are going to need some sort of loadMore function. To put in other words, you are going to need to detect when the user has scrolled to a particular position, and perform some updating function.

While your own directive might be better at encapsulating your specific requirement, you could achieve what you want with any other current infinite scrolling plugin. Simply keep two versions of your array in your model. One is the data, while the other is the data that the user sees. If your arrays are of objects, then both should be able to work on the same items.

For example:

var data = [...];
var position = 0;
var pageSize = 10;
$scope.viewable = [];

$scope.loadMore = function(){
    $scope.viewable = $scope.viewable.concat(data.slice(position, position + pageSize));
    position += pageSize;
};

Update:

If this is something you need to implement often, but don't want to implement your own scrolling related directive, you could encapsulate the idea above in a factory that manages multiversion arrays. You would still have to hook the loadMore, and setup the multiversion, but your controller and view code would look like the following:

// the data you loaded somewhere
var data = [...];
$scope.specialArray = PageableArrayFactory.create(data);

// then in your html
ng-repeat="item in specialArray.viewItems"
// where you put your infinite scroll
infinite-scroll="specialArray.loadMore()"

PageableArrayFactory just needs to be a factory that takes in your big data array, and keeps track of a viewable copy array like my initial example. It shouldn't be too hard to implement, and can then be reused with a single line of code in any controller after you load your data.

Another example:

You could also build a custom filter on $index (or use ng-show/if), so that ng-repeat only shows the items that you want. You will still need to hook loadMore() though if you want to use existing infinite scroller code, which means you will still need something my factory example.

Upvotes: 2

Related Questions