Angularjs 元素中的角度ng repeat条件换行项目（ng repeat中的分组项目）

我正在尝试使用条件对ng重复中的项目进行分组

一个示例条件是使用相同的小时对所有元素进行分组

数据：

[
    {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'},
    ...
]

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

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

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

{{r.name}}

还尝试了：

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

{{r.name}}

有效输出为：

<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>

AAA

BBB

CCC

DDD

EEE

如果我的问题没有简单的解决方案，我的最后一个选择是将数据分组，然后将其分配给ng repeat中使用的范围变量

---

有什么想法吗？

首先在控制器中创建组：

 $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();
};

然后为其制作一个过滤器：

 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>

{{r.name}}

---

请参阅，您可以使用模块的groupBy筛选器。
所以你可以这样做：

用法：

collection| groupBy:property

使用带点符号的嵌套属性：

属性。嵌套属性

JS:

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

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

HTML:

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

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

组名：{{key}

玩家：{{player.name}

结果：
组名：alpha
*玩家：吉恩
组名：beta
*玩家：乔治
*球员：保拉
组名：gamma
*玩家：史蒂夫
*玩家：Scruath

---

更新：

只是一个简单的HTML静态组解决方案

组别名称:足球

玩家名称：{{Player.Name}

组别名称:篮球

玩家名称：{{Player.Name}

输出：

组名：足球
-玩家名称：Nikodem
-球员姓名：兰伯特
组名：篮球
-球员姓名：约翰
-玩家名称：伊扎克

---

-玩家名称：Dionisia

我们可以为这些创建我们自己的数据集。您的输出与正常情况不同。任何类型的即时groupBy筛选器（或控制器方法）都很难在angular中实现，因为angular无法识别分组的数组/对象是不变的，因此会进入可怕的无限$digest循环。最好的办法是使用

$watch

实现某种稳定的分组。这很难看，但可能是目前唯一的方法。您是在处理定义数量的分组还是基于数据的动态分组？这很好，但在控制台中出错：

错误：[$rootScope:infdig]

，如何解决它？@HirenKagrana，您使用哪个版本？尝试使用cdnjs的0.4.7版，这是一个已解决的旧问题，我发现

sum

filter与标准表中的

groupBy

一起非常有用，包含了所有场景。请参阅以@HireKagrana one为基础构建的示例。如果我有一个具有三个值的数组，并且我想在组名旁边打印颜色，该怎么办$scope.players=[{name:'Gene'，team:'alpha'，color:'green'}，{name:'George'，team:'beta'，color:'white'}，{name:'Steve'，team:'gamma'，color:'blue'}，{name:'Scruath'，team:'gamma color:'reded'}，{；如果我需要用球队名称显示球队排名，该怎么办？我喜欢这个答案，因为它不需要模块。如果重复项目的

$index

需要引用

玩家

集合中的项目，该解决方案将不起作用。。。