什么是“跟踪”在AngularJS中它是如何工作的？ [英] What is "track by" in AngularJS and how does it work?

问题描述

我真的不明白跟踪的工作方式及其作用。

我的主要目标是使用<$ c $使用跟通过跟踪字符串&重复值

通常 ng-repeat 按项目本身跟踪每个项目。对于给定的数组 objs = ['one'，'one'，2，'five'，'string'，'foo'] ， ng -repeat 尝试在 ng-repeat =obj in objs obj 的变化$ C>。问题是我们有重复的值，而角度会抛出错误。解决这个问题的一种方法是通过其他方式对物体进行角度跟踪。对于字符串，跟踪$ index 是一个很好的解决方案，因为你真的没有其他方法来跟踪字符串。

< h3> 追踪&触发摘要&输入焦点

你暗示你对角度有些新意。当角度对每个观察到的属性进行详尽检查以反映对应视图的任何变化时，就会发生摘要循环;通常在摘要周期中，您的代码会修改其他监视属性，因此需要再次执行该过程，直到angular检测到更多更改为止。

例如：您单击一个按钮通过 ng-click 更新模型，然后你做一些事情（我的意思是你在回调中写的东西，当用户点击时执行），然后是角度触发摘要周期以刷新视图。我不太清楚地解释这一点，所以你应该进一步调查，如果这没有澄清事情。

所以回到追踪。让我们用一个例子：

1. 调用服务返回一个对象数组


2. 更新一个对象在保存服务后，在数组和保存对象


3. 中，根据API返回的内容，您可以：
   
   
   
   
   1. replace整个对象或
   
   
   2. 更新现有对象的值
   
   



4. 反映<$中的变化c $ c> ng-repeat UI

如何跟踪此对象将决定UI如何反映更改。

我遇到过的最烦人的用户体验之一就是这个。假设您有一个对象表，每个单元格都有一个输入，您可以在其中对这些对象的属性进行内联编辑。我想更改值，然后 on-blur ，在您可能正在等待响应的同时移动到下一个要编辑的单元格时保存该对象。所以这是一个自动保存类型的东西。根据您通过语句设置轨道的方式，当响应被写回到对象数组中时，您可能会失去当前焦点（例如，当前正在编辑的字段）。

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.

解决方案

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.

这篇关于什么是“跟踪”在AngularJS中它是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！