Question

我尝试使用条件对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'},
    ...
]

＆＃39;时间＆＃39;字段实际上是一个时间戳（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中使用的范围变量。

有什么想法吗？

Answer 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
    *球员：基因
  集团名称：beta
    *球员：乔治
    *球员：保拉郎   组名：伽马
    *球员：史蒂夫
    *球员：Scruath

更新： jsbin

Answer 2

首先在Controller中制作组：

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

见DEMO

Answer 3

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

<ul>
  Group name: Football
  <li ng-repeat="player in players" ng-if="player.group == 'football'">
    Player Name: {{ player.name }} 
  </li>
  Group name: Basketball
  <li ng-repeat="player in players" ng-if="player.group == 'basketball'">
    Player Name: {{ player.name }} 
  </li>
</ul>

输出

组名：足球
- 玩家姓名：Nikodem
- 球员姓名：Lambert
团体名称：篮球
- 球员姓名：约翰 - 球员姓名：Izaäk
- 球员姓名：Dionisia

元素中的角度ng重复条件换行项（ng-repeat中的组项）

3 个答案: