问题标签 [angularjs-track-by]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1855 浏览

angularjs - “ng-options”上“track by”的目的是什么

ng-options使用 Angular 1.3 时trackexpr (track by) 的目的是什么?

在 Angular 1.2 中,此表达式更改了value=""生成选项上的表达式,以匹配集合中每个项目的 trackexpr 的结果。在 Angular 1.3 中不再是这种情况,根据这个 jsfiddle:http: //jsfiddle.net/3fzkym3m/。现在选项只有增量值。

在 Angular 1.2 中,生成的选项列表是:

在 Angular 1.3 中,生成的选项列表是:

Angular 是否仍在使用 track by 来匹配源集合和所选项目之间的对象?这样做还有性能优势吗?为什么在 Angular 1.2 和 1.3 之间会发生这种变化?

0 投票
1 回答
784 浏览

javascript - ng-repeat track by 不起作用:缓慢且仍在生成 $$hashKey

我有一个这样的 ng-repeat 设置:

main[main.mode].primary是一个数组,而 ...<code>.filter.order 是一个字符串。

根据这篇博文

在幕后 ngRepeat 为每个任务添加了一个 $$hashKey 属性来跟踪它。如果您用来自服务器的新任务对象替换原始任务,即使它们实际上与您的原始任务完全相同,它们也不会具有 $$hashKey 属性,因此 ngRepeat 不会知道它们代表相同的元素。

重新生成列表是一项非常常见的任务,该应用程序会挂起超过一秒钟,因此我对跟踪感兴趣。根据我看过的许多问题和文档,我使用正确的语法来排序和跟踪数组。从文档

项目中的项目 | filter:searchText track by item.id 是一种模式,可用于结合跟踪表达式将过滤器应用于项目。

为什么不通过实施跟踪?我正在运行角度 1.3.11。

编辑 如果我删除 orderBy 参数,它甚至都不起作用

0 投票
3 回答
24864 浏览

angularjs - 通过多个属性跟踪的 ng-repeat

我有角度 ng-repeat 指令的问题。目前我在一些项目上工作,从 API 我得到一个项目列表(有时可能是 1k 个项目),这个列表应该每 5 秒刷新一次(它正在监视相关项目)。

当列表长度稍大时,网站在重新渲染 DOM 时可能会“变慢”。结果表明,角度重新生成了整个 DOM(但 95% 的项目是相同的!)

一种可能的方法是将“track by”表达式设置为例如 item.id。但是这里出现了另一个问题,例如,当其他用户更改描述时,我还希望重新生成项目。由于 track by is expression to item.id 更改 item.description 并没有更新 DOM 中的项目。

有办法通过多个属性进行跟踪吗?也许一些功能?或者也许可以通过“手”进行比较?

任何想法,代码示例我将不胜感激:)

更新

当我将 track by 设置为 item.id 时,我发现 angular 并没有为项目重新创建 html,只是更新已创建元素中的值,它似乎“更快”,然后删除和创建。以前我虽然有点不同。

使固定

对于那些在ng-repeat USE track by item.id中寻找超过 1k 个项目的更好性能的人,它将提高您的性能;)

0 投票
1 回答
288 浏览

javascript - Angular:当您需要“跟踪”但您没有要跟踪的唯一属性时,您会怎么做?

假设 I'm ng-repeating over images,这是一个具有 asrc和 acaption属性的对象数组。

假设可能有重复的图像,所以src+caption组合不能确保唯一性。我想track by,但似乎没有其他方法可以做到这一点$index

$index对我来说似乎是一个糟糕的解决方案。想象一下,第一张图片 (a) 被删除了。然后将更改所有后续图像的索引,因此必须重新渲染整个列表。这对于包含 10 个项目的列表来说并不算太糟糕,但对于更大的列表来说却是这样。

  1. 想法?

  2. 另外,如果src+caption 确保是唯一的呢?我怎样才能拥有track by多个属性?

  3. track by将被跟踪的属性放在 上是否有效$$watchers?就像是track by image.id在做类似的事情$scope.$watch(image.id, cb)

0 投票
1 回答
220 浏览

angularjs - AngularJS orderBy 不能与 trackBy 一起使用

我不知道为什么 orderBy 不能与 trackBy 一起使用,这让我抓狂:(

这是我的 HTML 代码:

即使我将顺序更改为反向,每次都给我相同的结果

这里是我的 AngularJS 代码:

如果您需要更多代码,请告诉我

0 投票
1 回答
2223 浏览

javascript - 更新 ng-options 使用的数组,刷新所选对象

在角度上,如果需要,使用 Track by 按值而不是按引用来跟踪选择是一个不错的功能。但是假设我将数组切换到后面并且选定的对象 id 匹配一个新的 Id 我希望选择也改变

我如何强制它重新评估?

HTML:

JS:

可以说我选择Id 2然后更新selectedObject仍然是旧的id:2 value:0,我希望它直接更改为id:2 value:200.

https://jsfiddle.net/IngoVals/p4ye3uaq/

PS为什么angular.copy小提琴中的工作不起作用?

0 投票
2 回答
209 浏览

javascript - 角度重复跟踪

我有这个笨蛋:

当我通过单击“未完成”进行过滤时,我在转发器中收到重复错误

但是,如果您查看代码,则只有一个 ID 为 1441 的节点。我试图通过选项将其他人跟踪,但没有任何效果。

//更新信息:由于嵌套结构,按 $index 跟踪不起作用

如何解决?

非常感谢!

大卫

0 投票
2 回答
1774 浏览

javascript - ngRepeat track by:如何在模型更改时添加事件挂钩?

我有一个简单的 ngRepeat,如下所示:

arrayOfRecords从服务器更新,可能包含新数据。

ngRepeattrack by功能可以判断何时将新元素添加到数组中并自动更新 DOM 而无需更改现有元素。当有新数据进入或旧数据被删除时,我想挂钩该代码并执行回调函数。是否可以通过 Angular 轻松做到这一点?

据我了解,$$watchers只要某些变量发生更改,就会触发回调,但我不知道如何破解它。这是正确的方向吗?


注意:我知道我可以手动保存arrayOfRecords并在获取新值时将其与新值进行比较以查看发生了什么变化。但是,由于 Angular 已经提供了track by具有此逻辑的功能,如果我可以让 Angular 在数组中添加或删除元素时自动触发事件回调,那就太好了。复制 Angular 中已经存在的这种逻辑是没有意义的。

0 投票
1 回答
282 浏览

javascript - 如何为 ng-repeat 创建对象的新实例

如何为 ng-repeat 创建具有不同(唯一)hashkey 或 id 的对象的新实例?我尝试使用“track by”,但无法正常工作。

我的代码如下:

对于表中的每一行(可能是 5 ,10 ...行),我想显示存储在此列表中的同一组复选框:

$scope.table_rows.objects选中复选框后,我将使用此库 存储复选框对象:http: //vitalets.github.io/checklist-model/

复选框显示并正常运行。但是,当我将选中复选框的对象存储在 $scope.table_rows.objects 中时,它们都具有相同的 hashkey。这就是问题。因为,当我显示 properties:[{t:"text1",v:0},{t:"text2",v:0},{t:"text3",v:0}]为输入字段并更新属性值之一时,例如table_rows[key].objects[1].v = 30,相同的值被复制到存储在其他行中的同一对象的属性中。

我试图返回新实例(但它不起作用):

0 投票
1 回答
552 浏览

angularjs - Angular ngOptions 'track by' 和空值验证问题

我有一个使用 ngOptions 和“track by”功能的选择列表,如下所示:

代码对象具有各种属性,包括确定代码有效性的开始日期和结束日期。有一个单独的“日期”属性,用于检查是否可以选择代码。对于这个有效日期指令,我需要整个对象,因此我使用 track by 并且不能使用“as”来填充 ng-model 属性。

这可以正常工作,但初始空值除外。

当验证返回 false (并相应地标记选择框)并且用户然后选择空值时,验证不会被重置。

即使 ng-model 属性“代码”从对象更改为空值,验证器也不会被调用。似乎因为 track by,它不会触发验证指令。有谁知道这个的解决方案?