Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does ngRepeat rerender all items after adding an new item?

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

like image 617
redben Avatar asked Jun 05 '13 18:06

redben


People also ask

How does ng-repeat work?

Definition and Usage The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.

Does ng-repeat create a new scope?

Each iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property.

What can I use instead of NG-repeat?

But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

Where is the last element in NG-repeat?

$first and $last It's common when using ng-repeat to add specific behavior to the first or last element of the loop, e.g. special styling around the edges. Instead, ng-repeat already supplies you with two ready boolean properties. $first is true for the first element, and $last is true for the last element.


2 Answers

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/

like image 197
DarioM Avatar answered Sep 19 '22 19:09

DarioM


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:

  • http://docs.angularjs.org/guide/concepts#runtime
  • http://docs.angularjs.org/api/ng.$rootScope.Scope#$digest
like image 20
Alex Osborn Avatar answered Sep 17 '22 19:09

Alex Osborn