元素中的Ang-ng重复条件包装项（ng-repeat中的组项）

我试图用一个条件来分组ng-repeat。

一个示例条件是将所有元素分组在同一小时。

数据：

[ {name: 'AAA', time: '12:05'}, {name: 'BBB', time: '12:10'}, {name: 'CCC', time: '13:20'}, {name: 'DDD', time: '13:30'}, {name: 'EEE', time: '13:40'}, ... ] 

“时间”字段实际上是一个时间戳（1399372207），但输出示例的确切时间更易于理解。

我使用ng-repeat列出这些项目：

 <div ng-repeat="r in data| orderBy:sort:direction"> <p>{{r.name}}</p> </div> 

也尝试过：

 <div ng-repeat-start="r in data| orderBy:sort:direction"></div> <p>{{r.name}}</p> <div ng-repeat-end></div> 

有效的输出是：

 <div class="group-class"> <div><p>AAA</p></div> <div><p>BBB</p></div> </div> <div class="group-class"> <div><p>CCC</p></div> <div><p>DDD</p></div> <div><p>EEE</p></div> </div> 

我的最后一个select，如果没有一个简单的解决scheme，我的问题是将数据分组，然后将其分配给ng-repeat中使用的范围variables。

有什么想法吗？

Answer 1

你可以使用angular.filter模块的groupByfilter。
所以你可以做这样的事情：

用法： collection | groupBy:property collection | groupBy:property
使用点符号的嵌套属性： property.nested_property
JS：

 $scope.players = [ {name: 'Gene', team: 'alpha'}, {name: 'George', team: 'beta'}, {name: 'Steve', team: 'gamma'}, {name: 'Paula', team: 'beta'}, {name: 'Scruath', team: 'gamma'} ]; 

HTML：

 <ul ng-repeat="(key, value) in players | groupBy: 'team'"> Group name: {{ key }} <li ng-repeat="player in value"> player: {{ player.name }} </li> </ul> 

结果：
组名：alpha
*球员：基因
组名：beta
*球员：乔治
*球员：宝拉
组名：伽马
*球员：史蒂夫
*播放器：Scruath

更新： jsbin

Answer 2

首先在控制器中创build组：

  $scope.getGroups = function () { var groupArray = []; angular.forEach($scope.data, function (item, idx) { if (groupArray.indexOf(parseInt(item.time)) == -1) { groupArray.push(parseInt(item.time)); } }); return groupArray.sort(); }; 

然后为它做一个filter：

  myApp.filter('groupby', function(){ return function(items,group){ return items.filter(function(element, index, array) { return parseInt(element.time)==group; }); } }) ; 

然后更改模板：

  <div ng-repeat='group in getGroups()'> <div ng-repeat="r in data | groupby:group" class="group-class"> <div><p>{{r.name}}</p></div> </div> </div> 

看DEMO