4

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 ?

redben
  • 5,578
  • 5
  • 47
  • 63
  • Roll your own directive that manipulates the HTML itself and avoid the AngularJS framework... but then... what's the point of using AngularJS in the first place? – Langdon Jun 06 '13 at 18:13
  • 1
    For a good read on `ng-repeat` and rendering: http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm – Dan Jun 06 '13 at 18:38

2 Answers2

8

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?

Langdon
  • 19,875
  • 18
  • 88
  • 107
  • Well the answer I got for this question is that the repeater redraws (or remanipulates the DOM elements of) all of its content http://stackoverflow.com/questions/16947108/does-ngrepeat-rerender-all-items-after-adding-an-new-item/16953795 – redben Jun 06 '13 at 18:43
  • 1
    You'll be fine if you don't call controller functions in your template like `{{getTheStatusOf(something)}}`, because AngularJS will have to call the function to figure out if it changed or not. – Langdon Jun 06 '13 at 22:27
  • I think this depends on your definition of "redraw". ng-repeat doesn't recreate the elements, but from what I've seen by stepping through the code, it does remove them from and add them back into the DOM. At least with my code. – adam0101 Apr 10 '14 at 16:31
  • I am pretty sure it's worth deeper looking at ngRepeat docs (https://docs.angularjs.org/api/ng/directive/ngRepeat) – Angular is smart enough to see whether an object is the same, and decide whether it needs to be re-rendered. There is a way to provide custom function, and by default Angular looks at object's identity. – jazzcat Jun 20 '14 at 17:06
0

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.

Community
  • 1
  • 1
Witold Cyrek
  • 21
  • 5