Angular.js 更复杂的条件循环

目标是创建这个

<h3>11.4.2013</h3>
<ul>
 <li>entry 1</li>
 <li>entry 2</li> 
 <li>entry 3</li>
</ul>

<h3>10.4.2013</h3>
<ul>
 <li>entry 4</li>
 <li>entry 5</li> 
 <li>entry 6</li>
</ul>

由此

[
    {
        "name": "entry1",
        "date": "11.4.2013"
    },
    {
        "name": "entry2",
        "date": "11.4.2013"
    },
    {
        "name": "entry3",
        "date": "11.4.2013"
    },
    {
        "name": "entry4",
        "date": "10.4.2013"
    },
    {
        "name": "entry5",
        "date": "10.4.2013"
    },
    {
        "name": "entry6",
        "date": "10.4.2013"
    }
]

问题是 ng-repeat 必须打开li所以我永远无法使用 ng-repeat 来做到这一点，对吗？我找到了这个http://jsfiddle.net/mrajcok/CvKNc/ http://jsfiddle.net/mrajcok/CvKNc/马克·拉吉诺克（Mark Rajnoc）的例子，但它仍然相当有限。

我还有什么其他选择？编写我自己的 ng-repeat like 指令？或者有没有另一种方法可以做到这一点而无需编写？

您可以编写自己的过滤器来过滤掉外部 ng-repeat 的唯一日期，例如：

filter('unique',function(){
  return function(items,field){
    var ret = [], found={};
    for(var i in items){
      var item = items[i][field];
      if(!found[item]){
        found[item]=true;
        ret.push(items[i]);
      }
    }
    return ret;
  }
});

具有以下标记：

<div ng-repeat="dateItem in items | unique:'date' | orderBy:'date'">
<h3>{{dateItem.date}}</h3>
<ul>
  <li ng-repeat="item in items | filter:dateItem.date">
    {{item.name}}
  </li>
</ul>  
</div>

看一下这个工作 plnkr 示例 http://plnkr.co/edit/KUkp2PFJQsB1RO4Kjz9t?p=preview- 或这个添加项目的更新示例 http://plnkr.co/edit/81knnd8KeUdYcMPW9foa?p=preview

但是，如果您将拥有大量物品（数百或数千），则此解决方案并不是最佳选择。另一种方法是创建更优化的数据结构。您甚至可以通过添加 $watch 使其与原始数据结构一起使用 - 类似于：

$scope.$watch('items',function(){
  var itemDateMap = {};

  for(var i=0; i<$scope.items.length; i++){
    var item = $scope.items[i], key = item.date;
    if(!itemDateMap[key]){
      itemDateMap[key] = [];
    }
    itemDateMap[key].push(item);
  }

  $scope.itemDateMap=itemDateMap;


},true);

使用此标记：

<div ng-repeat="(date,subItems) in itemDateMap">
<h3>{{date}}</h3>
<ul>
  <li ng-repeat="item in subItems">
    {{item.name}}
  </li>
</ul>  
</div>

这是一个例子 http://plnkr.co/edit/Mg4he9DJXRxhoXkzOHWH?p=preview您可以在其中添加大量随机项目。