在元素角NG-重复条件包裹项目（NG-重复组项目） [英] Angular ng-repeat conditional wrap items in element (group items in ng-repeat)

问题描述

我使用的条件试图组的项目在NG重复。

I'm trying to group the items in a ng-repeat using a condition.

一个例子条件是组与同一时间的所有元素。

An example condition is to group all elements with the same hour.

数据：

[
    {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），但确切时间的例子输出更容易理解。

The 'time' field is actually a timestamp (1399372207) but with the exact time the example output is easier to understand.

我使用的NG-重复列出这些项目：

I am listing these items using 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-重复使用的范围变量的简单解决方案。

My last option if there isn't a simple solution for my problem would be to group the data and then assign it to the scope variable used in ng-repeat.

有什么想法？

推荐答案

您可以使用 angular.filter 的GROUPBY过滤器模块。

所以你可以做这样的事情：

You can use groupBy filter of angular.filter module.
so you can do something like this:

用法： 收藏| GROUPBY：属性

使用带有点符号嵌套属性： 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

RESULT:
Group name: alpha
* player: Gene
Group name: beta
* player: George
* player: Paula
Group name: gamma
* player: Steve
* player: Scruath

更新： jsbin

这篇关于在元素角NG-重复条件包裹项目（NG-重复组项目）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！