Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 05a3b08

Browse files
teropaNarretz
authored andcommitted
docs(ngRepeat): extend description of tracking and duplicates
Add a section to the documentation on how tracking between items and DOM elements is done, and why duplicates are not allowed in the collection. Describe how the default tracking behaviour can be substituted with track by. Tweak the wording in the `track by` section to discuss “tracking expressions” instead of “tracking functions”. Closes #8153
1 parent 65df5da commit 05a3b08

File tree

1 file changed

+55
-6
lines changed

1 file changed

+55
-6
lines changed

src/ng/directive/ngRepeat.js

+55-6
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,55 @@
4646
* when keys are deleted and reinstated.
4747
*
4848
*
49+
* # Tracking and Duplicates
50+
*
51+
* When the contents of the collection change, `ngRepeat` makes the corresponding changes to the DOM:
52+
*
53+
* * When an item is added, a new instance of the template is added to the DOM.
54+
* * When an item is removed, its template instance is removed from the DOM.
55+
* * When items are reordered, their respective templates are reordered in the DOM.
56+
*
57+
* By default, `ngRepeat` does not allow duplicate items in arrays. This is because when
58+
* there are duplicates, it is not possible to maintain a one-to-one mapping between collection
59+
* items and DOM elements.
60+
*
61+
* If you do need to repeat duplicate items, you can substitute the default tracking behavior
62+
* with your own using the `track by` expression.
63+
*
64+
* For example, you may track items by the index of each item in the collection, using the
65+
* special scope property `$index`:
66+
* ```html
67+
* <div ng-repeat="n in [42, 42, 43, 43] track by $index">
68+
* {{n}}
69+
* </div>
70+
* ```
71+
*
72+
* You may use arbitrary expressions in `track by`, including references to custom functions
73+
* on the scope:
74+
* ```html
75+
* <div ng-repeat="n in [42, 42, 43, 43] track by myTrackingFunction(n)">
76+
* {{n}}
77+
* </div>
78+
* ```
79+
*
80+
* If you are working with objects that have an identifier property, you can track
81+
* by the identifier instead of the whole object. Should you reload your data later, `ngRepeat`
82+
* will not have to rebuild the DOM elements for items it has already rendered, even if the
83+
* JavaScript objects in the collection have been substituted for new ones:
84+
* ```html
85+
* <div ng-repeat="model in collection track by model.id">
86+
* {{model.name}}
87+
* </div>
88+
* ```
89+
*
90+
* When no `track by` expression is provided, it is equivalent to tracking by the built-in
91+
* `$id` function, which tracks items by their identity:
92+
* ```html
93+
* <div ng-repeat="obj in collection track by $id(obj)">
94+
* {{obj.prop}}
95+
* </div>
96+
* ```
97+
*
4998
* # Special repeat start and end points
5099
* To repeat a series of elements instead of just one parent element, ngRepeat (as well as other ng directives) supports extending
51100
* the range of the repeater by defining explicit start and end points by using **ng-repeat-start** and **ng-repeat-end** respectively.
@@ -113,12 +162,12 @@
113162
*
114163
* For example: `(name, age) in {'adam':10, 'amalie':12}`.
115164
*
116-
* * `variable in expression track by tracking_expression` – You can also provide an optional tracking function
117-
* which can be used to associate the objects in the collection with the DOM elements. If no tracking function
118-
* is specified the ng-repeat associates elements by identity in the collection. It is an error to have
119-
* more than one tracking function to resolve to the same key. (This would mean that two distinct objects are
120-
* mapped to the same DOM element, which is not possible.) Filters should be applied to the expression,
121-
* before specifying a tracking expression.
165+
* * `variable in expression track by tracking_expression` – You can also provide an optional tracking expression
166+
* which can be used to associate the objects in the collection with the DOM elements. If no tracking expression
167+
* is specified, ng-repeat associates elements by identity. It is an error to have
168+
* more than one tracking expression value resolve to the same key. (This would mean that two distinct objects are
169+
* mapped to the same DOM element, which is not possible.) If filters are used in the expression, they should be
170+
* applied before the tracking expression.
122171
*
123172
* For example: `item in items` is equivalent to `item in items track by $id(item)`. This implies that the DOM elements
124173
* will be associated by item identity in the array.

0 commit comments

Comments
 (0)