javascript - AngularJS : custom iterations/data transformations and grouping. .. 当简单的 ng-repeat 不会削减它时

Question

还是这个问题Angular.js more complex conditional loops但我觉得问题的答案是正确的，所以我接受了。

因此，让我详细说明一下，而不是在最初的问题中。

我正在尝试得到这个

<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 中得到的答案的结果

请注意，实际上最多可以有 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 中移动点头而不是重新渲染所有内容，但是当我重建整个结构时它肯定不会以这种方式工作。

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

我该怎么办？

Answer 1

这是我的建议 - 只使用一种结构，并且只将一种结构暴露给范围( map )。并创建一个函数来将项目数组添加到 map ，以及一个将 map 转换为数组的函数(我假设您需要这个数组用于服务器通信或其他东西)。

  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 with my suggestion .我认为它的性能非常好。

哦 - 我刚刚注意到你想要它排序 - 我没有时间更新我的例子，但它不是很复杂。请改用此结构(数组与对象与数组，而不是对象与数组)- 这样您就可以在根数组上使用 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"
    }
  ]
}
]