CODEWITHSUNDEEP
angularjs
redben
redben

Reputation: 5686

How to implment a "Load more" pagination in Angularjs without ng-repeat?

Since ng-repeat redraws all items on events like model change, what would be a better approach to implementing a "load more" behavior/pagination in angularjs ?

Upvotes: 4

Views: 12184

Answers (2)

Witold Cyrek
Witold Cyrek

Reputation: 21

I've had similiar issue recently with ng-repeat, take a look here. Essentially you can apply that approach here. Have a list of all documents, and a sub list of only documents in the view. When you reach the end of the list, load more documents into all documents, and from there grab the last X for your visible list, but keep removing from the top when you load.

Yes this will cause a lot of redrawing. But it will not be noticeable.

You can also avoid a lot of redrawing with bind-once (native since 1.3), but it will still generate a lot of watchers.

Upvotes: 0

Langdon
Langdon

Reputation: 20073

What exactly are you seeing that makes you want to avoid ngRepeat? I've drafted up a simple example that illustrates what gets redrawn and what doesn't:

Example 1: http://jsfiddle.net/langdonx/uf2C9/

If you check the console, you'll see that when you click the add button to add another item to the model, only the newly added item gets rendered.

Example 2: http://jsfiddle.net/langdonx/uf2C9/2/

Manipulating every item in the model, still doesn't redraw the entire ngRepeat, it just updates what it needs to.

Example 3: http://jsfiddle.net/langdonx/uf2C9/1/

To help illustrate that Example 2 is sound, I added {{item.name}} to the image's src just to make sure it would change (which it does).

So what exactly are you trying to avoid?

Upvotes: 8

Related Questions