AngularJS:定制迭代/数据转换和分组...当简单NG重复是不会削减它(AngularJS :

2019-08-21 23:27发布

不过这个问题Angular.js更复杂的条件循环的 ,但我觉得这个问题的答案,因为它被要求是正确的,所以我接受了。

因此,让我阐述超过我原来的问题没有。

我试图让这个

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

大。 但它与问题shizzload的成本。 每当一个新项目添加我必须重建itemDateMap ,每次一个项目被删除我必须重建itemDateMap ,每次日期改变,我必须重建itemDateMap 。 当我想删除一个项目,我必须首先把它原来的基准指数。 而每次itemDateMap重建,整个事情是重新呈现。 而且它不能进行排序,因为它是一个对象,而不是一个数组。

当有一对夫妇的条目百,它也变成真的,真的很慢。 我读的地方,NG-重复是相当聪明,看值,在DOM移动点头,而不是重新渲染一切的东西,但它肯定不会以这种方式工作时,我重建整个结构。

这不可能是正确的,这一切的麻烦做了非常,非常简单的事情..

我该怎么办?

Answer 1:

这是我的建议 - 只是一个结构工作,只露出一个结构范围(地图)。 并创建一个函数来将项目添加到地图的数组,并转换映射到一个数组的函数(我假设你需要这个数组服务器通信或东西)。

  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 。 我认为它执行得非常好。

哦 - 我只注意到你需要它有序 - 我没有时间来更新我的例子,但它也不是很复杂。 使用此结构,而不是(阵列与阵列的对象,而不是用阵列对象) - 这种方式可以使用OrderBy:“日期”根段列阵上:

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


文章来源: AngularJS : custom iterations/data transformations and grouping… when simple ng-repeat just won't cut it