AngularJS：preserving广告订单纳克重复 [英] AngularJS: preserving insertion order with ng-repeat

问题描述

我实现与NG重复自动完成系统。基本上，我有一个饲料NG-重复对象的数组。我注意到，当我到阵列插入新的东西，插入顺序并不preserved。例如：

I'm implementing an autocomplete system with ng-repeat. Basically, I have an array of objects which feeds an ng-repeat. I noticed that when I insert new things in to the array, the insertion order is not preserved. For example

广告订单

A - B - ç

A - B - C

纳克重复渲染顺序

A - Ç - B

A - C - B

（每个A的，B，C是2键ID和名称的对象）

(each of A, B, C is an object with 2 keys 'id' and 'name')

再仔细一看向我建议这种现象是如何产生$$ hashKey引起的。 'C'不知怎么的哈希键比'B'小，因此它涉及前B，即使它与插入顺序是相反的。

A closer look suggested to me that this behavior is caused by how $$hashKey is generated. 'C' somehow got a hash key that is smaller than 'B' so it comes before 'B' even though it's the opposite with insertion order.

谁能帮助吗？

推荐答案

您应该语法使用轨道（需要angular.js > = 1.2 ）

<div ng-repeat="item in items track by item.id">

阅读这篇文章：的http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm

ngRepeat文档：

您还可以提供一种可用于在物体与DOM的元素集合中的相关联的可选跟踪功能。如果没有指定跟踪功能是NG重复关联集合中被识别元素。这是有一个以上的跟踪功能，以解决对相同的键错误。 （这将意味着，两个不同的对象被映射到相同的DOM元素，这是不可能的。）过滤应当指定一个跟踪前pression之前被施加到前pression，

variable in expression track by tracking_expression`

You can also provide an optional tracking function which can be used to associate the objects in the collection with the DOM elements. If no tracking function is specified the ng-repeat associates elements by identity in the collection. It is an error to have more than one tracking function to resolve to the same key. (This would mean that two distinct objects are mapped to the same DOM element, which is not possible.) Filters should be applied to the expression, before specifying a tracking expression.

这篇关于AngularJS：preserving广告订单纳克重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！