Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 元素中的Angular ng-repeat条件包装项(ng-repeat中的组项)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用条件在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

大佬总结

以上是大佬教程为你收集整理的angularjs – 元素中的Angular ng-repeat条件包装项(ng-repeat中的组项)全部内容,希望文章能够帮你解决angularjs – 元素中的Angular ng-repeat条件包装项(ng-repeat中的组项)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。