angularjs – 在AngualJS 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>