AngularJS：自定义迭代/数据转换和分组...当简单的 ng-repeat 无法解决问题时

还是这个问题Angular.js 更复杂的条件循环 https://stackoverflow.com/q/15943193/301596但我觉得这个问题的答案是正确的，所以我接受了。

因此，让我比在原来的问题中更详细地阐述。

我正在努力得到这个

<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>

从这个数据结构

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

基本上是唯一超出标准的额外东西ng-repeat我想添加的是这些标题。我简直不敢相信我必须通过添加它们来解决这么多问题。

这就是我最终使用第一个问题得到的答案http://plnkr.co/edit/Zl5EcsiXXV92d3VH9Hqk?p=preview http://plnkr.co/edit/Zl5EcsiXXV92d3VH9Hqk?p=preview

请注意，实际上最多可以有 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>

伟大的。但它也带来了一系列问题的代价。每次添加新项目时我都必须重建itemDateMap，每次删除一个项目时我都必须重建itemDateMap，每次更改日期，我都必须重建itemDateMap。当我想删除一个项目时，我必须首先获取其原始引用的索引。而且每次itemDateMap被重建，整个东西被重新渲染。而且它无法排序，因为它是一个对象而不是数组。

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

这不可能是正确的，所有这些麻烦都是为了做一件非常非常简单的事情。

我应该怎么办？

这是我的建议 - 只使用一种结构，并且只向范围（地图）公开一种结构。并创建一个函数来将项目数组添加到地图中，以及一个将地图转换为数组的函数（我假设您需要这个数组用于服务器通信或其他东西）。

  var toKey=function(item){
    return moment(item.date).format("YYYY-MM-DD");
  }

  $scope.itemDateMap = {};
  $scope.addItemToDateMap=function(item){
    var key = toKey(item);
    if(!$scope.itemDateMap[key]){
      $scope.itemDateMap[key] = [];
    }
    $scope.itemDateMap[key].push(item);    
  }

  $scope.removeItemFromDateMap=function(item){
    var key = toKey(item), subitems = $scope.itemDateMap[key];
    var index = subitems.indexOf(item);
    subitems.splice(index,1);
    if(subitems.length === 0){
      delete $scope.itemDateMap[key];
    }
  }

  var addArrayToMap = function(items){
    for(var i=0; i<items.length; i++){
      var item = items[i]; 
      $scope.addItemToDateMap(item);
    }
  };

  $scope.mapToArray = function(){
    var items = [];
    for(var key in $scope.itemDateMap){
      var subitems = $scope.itemDateMap[key];
      for(var j=0;j<subitems.length;j++){
        var item = subitems[j];
        items.push(item);
      }
    }
    return items;
  }

我已经更新了你的plnkr 与我的建议 http://plnkr.co/edit/6YoFZzQoMmXkgznvRvvS?p=preview。我认为它的表现相当不错。

哦 - 我刚刚注意到你想要对其进行排序 - 我没有时间更新我的示例，但它并不是很复杂。请改用此结构（带有数组的对象的数组，而不是带有数组的对象） - 这样您就可以在根数组上使用 orderBy:'date' ：

[
{
  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"
    }
  ]
}
]