1

i am new in angular and i go through this doc https://docs.angularjs.org/api/ng/directive/ngRepeat but do not understand the objective of track by clause using with ng-option.

here are few usage

<div ng-repeat="n in [42, 42, 43, 43] track by $index">
  {{n}}
</div>

<div ng-repeat="n in [42, 42, 43, 43] track by myTrackingFunction(n)">
  {{n}}
</div>

<div ng-repeat="model in collection track by model.id">
  {{model.name}}
</div>

<div ng-repeat="obj in collection track by $id(obj)">
  {{obj.prop}}
</div>

<div ng-repeat="model in collection | orderBy: 'id' as filtered_result track by model.id">
    {{model.name}}
</div>

track by is something close to order by clause in sql ?

if yes then how can i specify sort order like ASC or DESC ?

in last code track by and orderBy both use....what they are doing. not clear what kind of output will come.

what is difference between orderBy & track by ?

orderBy is filter that i know. so track by is also a filter.

i know i am asking very basic question. basically posting here because things is not clear after reading it from doc. looking for some help and example to understand what track by does ?

how track by is different from orderby in terms of usage ?

Monojit Sarkar
  • 2,353
  • 8
  • 43
  • 94

2 Answers2

2

ngRepeat uses a function to "keep track" of all items in the collection and their corresponding DOM elements

If a new item is added to the collection, ngRepeat will know that all other items already have DOM elements, and will not re-render them.

See the detail

If you have object for ngRepeat and it have any identity field (Like primary key value or Unique value), use it in track by.

Good thing is that if you are re-loading the list, dome will not re-render for existing items but only the new ones.

Community
  • 1
  • 1
Ali Adravi
  • 21,707
  • 9
  • 87
  • 85
2

By default orderBy will be in ascending order. You can use "reverse" for descending order like

In HTML Template Binding

{{ orderBy_expression | orderBy : expression : reverse}}

In JavaScript

$filter('orderBy')(array, expression, reverse)

If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression.

For example, you may track items by the index of each item in the collection, using the special scope property $index:

`<div ng-repeat="n in [42, 42, 43, 43] track by $index">

 {{n}}

</div>`
Ambuj
  • 92
  • 1
  • 9
  • can you see mu posted code and help me to understand the meaning of 4th and 5th set of code. – Monojit Sarkar Apr 18 '16 at 20:07
  • In model object if your id property is unique and may be name property is duplicated go for this scenario
    {{model.name}}
    – Ambuj Apr 20 '16 at 05:02
  • If in "obj" object no property is unique then go for
    {{obj.prop}}
    – Ambuj Apr 20 '16 at 05:04
  • If you want to track by id property and order by id property then go for
    {{model.name}}
    It will first sort in ascending order then it will do the track     – Ambuj Apr 20 '16 at 05:06
  • For more clear info go for this http://stackoverflow.com/questions/22761340/angularjs-ng-repeats-track-by-expression – Ambuj Apr 20 '16 at 05:09