Angular.js 更复杂的条件循环 [英] Angular.js more complex conditional loops

问题描述

目标是创造这个

11.4.2013
<ul><li>条目 1</li><li>条目 2</li><li>条目 3</li><h3>10.4.2013</h3><ul><li>条目 4</li><li>条目 5</li><li>条目6</li>

从这里

<预><代码>[{"name": "entry1",日期":11.4.2013"},{"name": "entry2",日期":11.4.2013"},{"name": "entry3",日期":11.4.2013"},{"name": "entry4",日期":10.4.2013"},{"name": "entry5",日期":10.4.2013"},{"name": "entry6",日期":10.4.2013"}]

问题是 ng-repeat 必须在 li 上，所以我永远无法使用 ng-repeat 做到这一点，对吗?我从 Mark Rajnoc 找到了这个 http://jsfiddle.net/mrajcok/CvKNc/ 示例，但它是仍然相当有限..

我还有什么选择?编写我自己的 ng-repeat 指令?或者有没有另一种不写的方法?

解决方案

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

filter('unique',function(){返回函数(项目，字段){var ret = [], found={};for(var i in items){var item = items[i][field];如果(！找到[项目]){找到[项目]=真；ret.push(items[i]);}}返回 ret;}});

带有以下标记:

<h3>{{dateItem.date}}</h3><ul><li ng-repeat="项目中的项目 | filter:dateItem.date">{{项目名称}}

看看 这个工作 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;}，真的);

使用此标记:

<h3>{{日期}}</h3><ul><li ng-repeat="子项目中的项目">{{项目名称}}

这是一个示例，您可以在其中添加大量随机项目.

The goal is to create this

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

from this

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

The problem is that ng-repeat would have to be on li so I wouldn't never be able to do this using ng-repeat, is that right? I found this http://jsfiddle.net/mrajcok/CvKNc/ example from Mark Rajnoc, but it's still pretty limiting..

What other choices do I have? Write my own ng-repeat like directive? Or is there another way to do it without writting one?

解决方案

You could write your own filter that filters out the unique dates for an outer ng-repeat, something like:

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;
  }
});

with the following markup:

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

Have a look at this working plnkr example -- or this updated example with adding items

However, if your going to have a lot of items (hundreds or thousands) this solution is not the most optimal. An alternative approach would be to create a more optimal data structure. You can even get this to work with your original data structure by adding a $watch - something like:

$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);

Works with this markup:

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

Here is an example where you can add lots of random items.

这篇关于Angular.js 更复杂的条件循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！