将插入顺序保持在Angular中 [英] Keeping insertion order in Angular

问题描述

我有一个HTML片段，该片段遍历键，值集合.当我创建一个对象并添加一些值时，然后通过HTML片段遍历该对象，一切都可以正常工作.

I have a HTML fragment that iterates over key, value collection. When I create an object and put some value in, then iterate trough that object via HTML fragment, all works perfectly.

但是，由于我需要按特定顺序排列键，因此我使用的是地图，而不是普通对象.这次我进行调试时，我可以看到插入顺序得以保留，但是由于某种原因，遍历集合的HTML片段似乎不知道该怎么做.使用地图对象时，我在屏幕上看不到任何东西，而看到无序内容时，则看不到常规对象.

However since I need keys in specific order, I'm using a Map instead of plain object. This time when I debug I can see that my insertion order was preserved, but for some reason the HTML fragment which iterates over collection doesn't seem to know how to do so. I see nothing on my screen when I use the map object, opposed to the regular object when I see unordered content

tr ng-repeat="(key, value) in rowTitlesValues"

当我再次将rowTitlesValues切换回对象时，我的HTML片段是什么样子，我在做什么错，如何保持插入顺序或如何对对象进行排序，以便其键处于自定义顺序?

Is how my HTML fragment looks like, when I switch rowTitlesValues back to object works again, what am I doing wrong, and how does one keep insertion order or how do I sort object so it's keys are in custom order?

推荐答案

从 ng-repeat 上的Angular参考(

From Angular reference on ng-repeat (link):

遍历对象属性

可以使用以下语法让ngRepeat遍历对象的属性:

Iterating over object properties

It is possible to get ngRepeat to iterate over the properties of an object using the following syntax:

< div ng-repeat =(key，value)in myObj">...</div>

您需要注意，JavaScript规范并未定义为对象返回的键的顺序.(为缓解此问题，在Angular 1.3中，ngRepeat指令用于按字母顺序对键进行排序.)

You need to be aware that the JavaScript specification does not define the order of keys returned for an object. (To mitigate this in Angular 1.3 the ngRepeat directive used to sort the keys alphabetically.)

1.4版删除了字母排序.现在，我们在运行myObj中的密钥时依赖于浏览器返回的顺序.似乎浏览器通常遵循按定义顺序提供密钥的策略，[...]

Version 1.4 removed the alphabetic sorting. We now rely on the order returned by the browser when running for key in myObj. It seems that browsers generally follow the strategy of providing keys in the order in which they were defined, [...]

如果不希望这样做，建议的解决方法是在将对象提供给ngRepeat之前，将其转换为按您希望的顺序排序的数组.您可以使用toArrayFilter之类的过滤器执行此操作，也可以自己在对象上实现$ watch.

If this is not desired, the recommended workaround is to convert your object into an array that is sorted into the order that you prefer before providing it to ngRepeat. You could do this with a filter such as toArrayFilter or implement a $watch on the object yourself.

此外，我不认为Angular 1.x知道如何迭代 Map .我相信此行代码证明了这一点:

Additionally, I do not think Angular 1.x knows how to iterate over a Map. I believe this line in the code proves it:

collectionKeys = [];
for (var itemKey in collection) { // iterates your object using `in`, not `of` or `Map.forEach()`
    ...
}
// ng-repeat then iterates the collectionKeys to create the DOM

因此，您可能需要按照Angular文档的建议进行操作:

So you will probably need to act as Angular docs suggest:

[...] 将您的对象转换成一个数组，该数组在提供给ngRepeat之前按您希望的顺序排序.您可以使用toArrayFilter之类的过滤器执行此操作，也可以自己在对象上实现$ watch.

这篇关于将插入顺序保持在Angular中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！