angularjs – 元素中的Angular ng-repeat条件包装项(ng-repeat中

发布时间：2020-12-17 08:50:16 所属栏目：安全来源：网络整理

导读：我试图使用条件在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'},...] “

我试图使用条件在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中使用的范围变量。

有什么想法吗？

您可以使用 angular.filter模块的groupBy过滤器。
所以你可以做这样的事情：

用法：collection | groupBy：属性
使用带点表示法的嵌套属性：property.nested_property
JS：

$scope.players = [
  {name: 'Gene',team: 'alpha'},{name: 'George',team: 'beta'},{name: 'Steve',team: 'gamma'},{name: 'Paula',{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
*玩家：乔治
*玩家：Paula
组名称：gamma
*玩家：Steve
*玩家：Scruath

更新：jsbin

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!