10

If during execution an item is added to an array that is rendered using ngRepeat, does it redraw all items?

Talha Awan
  • 4,573
  • 4
  • 25
  • 40
redben
  • 5,578
  • 5
  • 47
  • 63
  • 2
    The definitive answer to this question is "Yes.", but it can't be submitted because SO doesn't let you enter such a short answer. – Stewie Jun 05 '13 at 18:25
  • 2
    @Stewie It is good that it does not. Start with "Yes." then add a reason/explanation and link to reference(s). Or, just leave "Yes." in a comment. That's fine too. – user2246674 Jun 05 '13 at 18:26
  • You are right (about the answer limitations), but the question does not ask "Why does it redraw", it clearly just asks "Does it redraw" and, as such, the question format and length does not show any inclination to understand the deeper reasons behind the ngRepeat behaviour. That's what my "answer" is intending to indicate. – Stewie Jun 05 '13 at 18:36
  • 1
    @Stewie Even a simple "Yes." has a reason and understanding it can lead to a deeper understanding of AngularJS. – user2246674 Jun 05 '13 at 19:24

2 Answers2

12

Since Angular 1.2 we have the 'track by' option which will prevent the repeater from re-rendering all the items.

Example:

ng-repeat="task in tasks track by task.id"

Check out this explanation : http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

Zeeshan Hassan Memon
  • 8,105
  • 4
  • 43
  • 57
DarioM
  • 121
  • 1
  • 2
6

Yes, all items are redrawn.

In fact, the items may be redrawn at other times as well.

Example: When a value in a parent directive / template is updated. During the '$digest' loop, Angular will evaluate the scope tree and this will cause affected child components to be redrawn.

More information:

Alex Osborn
  • 9,831
  • 3
  • 33
  • 44
  • Thanks for the answer ! Here is the question continued :) http://stackoverflow.com/questions/16968614/how-to-implment-a-load-more-pagination-in-angularjs-without-ng-repeat – redben Jun 06 '13 at 17:38
  • 1
    oops, according to this article it does not redraw everything http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm – redben Jun 06 '13 at 18:44
  • 1
    That is a good point! To clarify - a new DOM element may not be added, if angular can determine the target element already exists. **However** changed elements will be re-evaluated - this can lead to expensive operations being rerun. In addition, `ng-repeat` on certain data types will always redraw all elements - i.e http://stackoverflow.com/q/14969502/317180 – Alex Osborn Jun 06 '13 at 20:52