Javascript AngularJS：自定义迭代/数据转换和分组。。。当简单的ng重复刚刚赢得'；别说了

这个问题仍然存在，但我觉得这个问题的答案是正确的，所以我接受了

因此，让我比我在最初的问题中详细阐述一下

我正试着弄到这个

<h3>11.4.2013</h3>
<ul>
 <li>oofrab | 4 | 11.4.2013 14:55 <button>remove</button></li>
 <li>raboof | 3 | 11.4.2013 13:35 <button>remove</button></li>
</ul>

<h3>10.4.2013</h3>
<ul>
 <li>barfoo | 2 | 10.4.2013 18:10 <button>remove</button></li>
 <li>foobar | 1 | 10.4.2013 12:55 <button>remove</button></li> 
</ul>

基本上，除了标准的

ng repeat

之外，我想添加的唯一额外内容是那些标题。我简直不敢相信我必须通过添加它们来解决这么多问题

这就是我在第一个问题中得到的答案

请注意，实际上最多可以有400个条目。我需要能够动态添加/删除/编辑条目

plunker的例子是这样的：

迭代原始数据，创建如下所示的新数据结构

{
  "2013-10-05": [
    {
      "id": 4,
      "name": "oofrab",
      "date": "2013-10-05 14:55:00",
      "_orig_index": 0
    },
    {
      "id": 3,
      "name": "raboof",
      "date": "2013-10-05 13:55:00",
      "_orig_index": 1
    }
  ],
  "2013-10-04": [
    {
      "id": 2,
      "name": "barfoo",
      "date": "2013-10-04 18:10:00",
      "_orig_index": 2
    },
    {
      "id": 1,
      "name": "foobar",
      "date": "2013-10-04 12:55:00",
      "_orig_index": 3
    }
  ]
}

允许我通过这样做获得我想要的结果

<div ng-repeat="(date,subItems) in itemDateMap">
<h3>{{date}}</h3>
<ul>
  <li ng-repeat="item in subItems">
    {{item.name}} | {{item.id}} | {{item.date}}
    <button type="button" ng-click="removeItem(item._orig_index)">x</button>
  </li>
</ul>  
</div>

{{date}}


{{item.name}}{{item.id}}{{{item.date}
x

太好了。但它也带来了一大堆问题的代价。每次添加新项目时，我必须重建

itemDateMap

，每次删除项目时，我必须重建

itemDateMap

，每次更改日期时，我必须重建

itemDateMap

。当我想删除一个项目时，我必须首先获取其原始引用的索引。每次重建

itemDateMap

时，整个过程都会重新呈现。它不能被排序，因为它是一个对象而不是数组

当有几百个条目时，它也变得非常非常缓慢。我在某个地方读到，ng repeat相当智能，可以观察值，在dom中移动节点，而不是重新渲染所有内容，但当我重建整个结构时，它肯定不会以这种方式工作

这不可能是对的，做一件非常非常简单的事情需要这么多麻烦

---

我该怎么办？

这是我的建议-只需使用一个结构，并且只向作用域（映射）公开一个结构。并创建一个函数，将项目数组添加到映射中，以及一个将映射转换为数组的函数（我假设您需要此数组用于服务器通信或其他用途）

var toKey=功能（项目）{
返回时间（项目日期）。格式（“YYYY-MM-DD”）；
}
$scope.itemDateMap={}；
$scope.addItemToDateMap=函数（项）{
var key=toKey（项目）；
if（！$scope.itemDateMap[key]）{
$scope.itemDateMap[key]=[]；
}
$scope.itemDateMap[key].push（项目）；
}
$scope.removitemfromdatemap=函数（项）{
var key=toKey（item），subitems=$scope.itemDateMap[key]；
var指数=子项目。indexOf（项目）；
分项.拼接（索引1）；
if（subitems.length==0）{
删除$scope.itemDateMap[key]；
}
}
var addArrayToMap=函数（项目）{
对于（var i=0；iyou可以通过编辑映射而不是每次创建它来提高性能鉴于新条目可能会添加到数组的中间，我该如何做..我必须循环遍历itemDateMap，查找是否有日期==与新条目的日期，如果没有，将其添加到相应的位置，如果该日期已经存在，循环遍历它的项目并将其添加到相应的位置..该死的，这仍然需要对项目进行简单的分组..而且现在，itemDateMap是一个对象，所以我不能很容易地编辑它..@foxx您是否考虑过创建多个对象（比如每天）我可以想象，如果您有400个条目（或更多条目），这将提高性能因为只有一天的ng重复必须在编辑时重建。你看到的数据结构是我从服务器上得到的，它不会改变。但我想你说的基本上是正在发生的事情，这个大对象在init上被拆分为几天，每天都有条目。看起来不错，肯定比以前快了一点。还有一个该死的问题它无法解决，那就是更改项目的日期，它应该移动项目/创建新的日期..这也是为什么我在那里有onblur指令。但是我通过使用移除和添加函数“array with objects with array”解决了这个问题但是会破坏你所做的所有功能。不是吗？啊，我明白了，我忘了在日期更改后重新排序，对不起。使用添加/删除似乎是一个合理的方法。是的，你必须做一些修改-我现在没有时间做，但它们应该不会太复杂。最后对它做了一点更改，但它会被删除谢谢你，我帮了我很多忙。你不得不做这么多才能把事情组合起来，这还是很让人难过的。
<div ng-repeat="(date,subItems) in itemDateMap">
<h3>{{date}}</h3>
<ul>
  <li ng-repeat="item in subItems">
    {{item.name}} | {{item.id}} | {{item.date}}
    <button type="button" ng-click="removeItem(item._orig_index)">x</button>
  </li>
</ul>  
</div>

[
{
  date:"2013-10-05",
  items: [
    {
      "id": 4,
      "name": "oofrab",
      "date": "2013-10-05 14:55:00"
    },
    {
      "id": 3,
      "name": "raboof",
      "date": "2013-10-05 13:55:00"
    }
  ]
},
{
date:"2013-10-04",
items: [
    {
      "id": 2,
      "name": "barfoo",
      "date": "2013-10-04 18:10:00"
    },
    {
      "id": 1,
      "name": "foobar",
      "date": "2013-10-04 12:55:00"
    }
  ]
}
]