元素中的角度ng-repeat条件包装项目（ng-repeat中的组项目）

一尘不染

元素中的角度ng-repeat条件包装项目（ng-repeat中的组项目）

angularjs

我正在尝试使用条件将项目分组为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>

如果没有针对我的问题的简单解决方案，我的最后选择是将数据分组，然后将其分配给ng-repeat中使用的作用域变量。

有什么想法吗？

阅读 233

2020-07-04

共1个答案

一尘不染

您可以使用angular.filter模块的groupBy过滤器。
因此您可以执行以下操作：

用法： 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
播放器：Gene
组名：beta
播放器：George
播放器：Paula
组名：gamma
播放器：Steve
*播放器：Scruath

更新： jsbin

2020-07-04