在 AngularJS ng-repeat 中对集合进行分组？

我有一个非常简单的场景，其中有一组记录可用，我需要以简单的 ng-repeat 方式显示它们。但是，我需要按属性对记录进行分组，并且我的目标不是不必更改集合即可完成此分组。我的想法是可以应用某种类型的过滤器，但在实践中过滤器，很好地过滤数据，而不是分组。有没有一种方法可以收集并简单地分组并重复？

真正的 hack-ish jsFiddle 就在这里，我正在尝试做的事情。

http://jsfiddle.net/bryangrimes/RufQh/5/

简而言之，这个想法是这样的：

<ul>
      <li ng-repeat="log in logs grouped by log.dept">
        <h4>{{log.dept}}</h4>
        {{log.name}} worked {{log.hours}} this week
      </li>            
  </ul>

更新： 所以最后我们已经使用 taffyDB 来存储原始数据集，所以它只是进行了扩展。

$.each($scope.logs, function() {
        var log = $(this)[0];

        // build angular friendly data structure
        log.workLogsDB = TAFFY(log.worklogs);
        log.deptLogs   = [];

        $.each(log.workLogsDB().distinct('department').sort(), function() {
            var dept  = $(this)[0].toString();
            var cost  = log.workLogsDB({department:dept}).sum('cost');
            var hours = log.workLogsDB({department:dept}).sum('hours');
            var items = log.workLogsDB({department:dept}).get();

            log.deptLogs.push({
                department: dept,
                total_cost: cost,
                total_hours: hours,
                line_items: items
            });
        });
    });

以及要呈现的 HTML：

<div ng-repeat="log in logs">
                <h3 onclick="$('#{{log.project}}').slideDown()">    
                    {{log.project}} hours:{{log.hours}} cost: ${{log.cost}}
                </h3>
                <ul id="{{log.project}}" style="display: none;">
                    <div ng-repeat="log in log.deptLogs">
                        <span style="font-weight: bold; text-transform: capitalize;">{{ log.department }} - Team Cost: ${{ log.total_cost }}, Team Hours: {{ log.total_hours }} </span>
                        <li ng-repeat="line in log.line_items">
                            {{line.employee}} {{line.hours}} hours
                        </li>
                        <br>
                    </div>
                </ul>
            </div>

我认为您需要创建该集合的排序副本，然后对该排序的集合进行 ng-repeat 。这是a fiddle不久前，当别人问过类似的问题时，我写了一篇文章。要点：

function MyCtrl($scope, orderByFilter) {  // inject orderByFilter
   $scope.sortedLogs = orderByFilter($scope.logs, '+dept');
}

HTML:

<ul>
  <li ng-repeat="log in sortedLogs">
      <ng-switch on="$first || log.dept != sortedLogs[$index-1].dept">
          <div ng-switch-when="true" class="group"><h4>{{log.dept}}</h4>
      </ng-switch>
      {{log.name}} worked {{log.hours}} this week
  </li>
</ul>