什么是AngularJS中的"跟踪"以及它是如何工作的？

Question

我真的不明白它的track by作用和作用.
我的主要目标是使用它ng-repeat来增加一些精度.

Answer 1

使用track by跟踪字符串和重复值

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

track by 并触发摘要和输入焦点

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

例如:您单击按钮以通过更新模型ng-click,然后执行某些操作(我的意思是,您在回调中编写的内容,以便在用户单击时执行),然后角度触发器摘要循环以刷新视图.我在解释这一点时并不太明确,所以如果不澄清事情,你应该进一步调查.

所以回到track by.我们来举个例子:

1. 调用服务以返回对象数组
2. 更新数组中的对象并保存对象
3. 保存服务后,根据API返回的内容,您可以:
   1. 替换整个对象或
   2. 更新现有对象的值
4. 反映ng-repeatUI的变化

跟踪此对象的方式将决定UI如何反映更改.

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

Answer 2

当你添加时,track by你基本上告诉angular在给定集合中为每个数据对象生成一个DOM元素.

你可以track by $index,如果您的数据源中有重复的标识符.

如果确实需要重复重复项目,则可以使用track by表达式替换自己的默认跟踪行为.

例:

[{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

尝试使用重复值ng-repeat,您将收到如下错误:

错误:ngRepeat:dupes Repeater中的重复键

为了避免这种问题,你应该使用track by $index.例如:

<ul>
   <li ng-repeat="item in [1, 2, 3, 3] track by $index">
       {{ item }}
   </li>
</ul>

以下是$index嵌套的方法ng-repeat:

<div ng-repeat="row in matrix">
    <div ng-repeat="column in row">
      <span>outer: {{$parent.$index}} inner: {{$index}}</span>
    </div>
</div>

以下是一些可以帮助您的资源:

• track by $index 文件
• ngRepeat 文件
• 2014年codelord.net关于ng-repeat性能的文章track by