Angular.js更復雜的條件循環

Question

目標是創造這個

<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做到這一點，是嗎？ 我發現這個來自Mark Rajnoc的http://jsfiddle.net/mrajcok/CvKNc/示例，但它仍然非常有限......

我還有其他選擇嗎？ 寫我自己的ng-repeat like指令？ 或者還有其他方法可以不寫一個嗎？

Answer 1

您可以編寫自己的過濾器，過濾掉外部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示例 - 或者這個更新的例子，添加項目

但是，如果您將擁有大量項目（數百或數千），則此解決方案不是最佳選擇。 另一種方法是創建更優化的數據結構。 您甚至可以通過添加$ 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>

這是一個可以添加大量隨機項的示例 。

Answer 2

當我和你的需求相同時，我使用了Object而不是Array。

<div ng-repeat="item in data">
  <h1>{{item.date}}</h1>
  <ul ng-repeat="name in item.names">
    <li>{{name}}</li>
  </ul>
</div>

http://jsfiddle.net/shoma/DqDsE/1/

這個問題頁面可以幫到你。

AngularJS中范圍原型/原型繼承的細微差別是什么？