Monday, May 13, 2024
 Popular · Latest · Hot · Upcoming
82
rated 0 times [  84] [ 2]  / answers: 1 / hits: 43839  / 8 Years ago, thu, september 22, 2016, 12:00:00

I don't really understand how track by works and what it does.

My main goal is to use it with ng-repeat to add some precision.


More From » angularjs

 Answers
17

Using track by to track strings & duplicate values



Normally ng-repeat tracks each item by the item itself. For the given array objs = [ 'one', 'one', 2, 'five', 'string', 'foo'], ng-repeat attempts to track changes by each obj in the ng-repeat=obj in objs. The problem is that we have duplicate values and angular will throw an error. One way to solve that is to have angular track the objects by other means. For strings, track by $index is a good solution as you really haven't other means to track a string.



track by & triggering a digest & input focuses



You allude to the fact you're somewhat new to angular. A digest cycle occurs when angular performs an exhaustive check of each watched property in order to reflect any change to the correspodant view; often during a digest cycle it happens that your code modify other watched properties so the procedure needs to be performed again until angular detects no more changes.



For example: You click a button to update a model via ng-click, then you do somethings (i mean, the things you wrote in the callback to perform when an user makes a click), then angular trigger digest cycle in order to refresh the view. I'm not too articulate in explaining that so you should investigate further if that didn't clarify things.



So back to track by. Let's use an example:




  1. call a service to return an array of objects

  2. update an object within the array and save object

  3. after save service, depending on what the API returns, you may:


    1. replace the whole object OR

    2. update a value on the existing object


  4. reflect change in ng-repeat UI



How you track this object will determine how the UI reflects the change.



One of the most annoying UXs I've experienced is this. Say you have a table of objects, each cell has an input where you want to in-line edit those objects' properties. I want to change the value, then on-blur, save that object while moving to the next cell to edit while you might be waiting on the response. So this is an autosave type thing. Depending on how you setup your track by statement, you may lose current focus (e.g. the field you're currently editing) when the response gets written back into your array of objects.


[#60637] Tuesday, September 20, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
lucianom

Total Points: 601
Total Questions: 98
Total Answers: 109

Location: Kenya
Member since Fri, Dec 23, 2022
1 Year ago
lucianom questions
Tue, Feb 22, 22, 00:00, 2 Years ago
Wed, May 5, 21, 00:00, 3 Years ago
Sun, Jan 24, 21, 00:00, 3 Years ago
Sat, Aug 15, 20, 00:00, 4 Years ago
Mon, Jun 22, 20, 00:00, 4 Years ago
;