为了账号安全,请及时绑定邮箱和手机立即绑定

元素中的角度ng-repeat条件包装项目(ng-repeat中的组项目)

元素中的角度ng-repeat条件包装项目(ng-repeat中的组项目)

繁华开满天机 2019-10-18 14:32:18
我正在尝试使用条件将项目分组为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中使用的作用域变量。有什么想法吗?
查看完整描述

3 回答

?
一只斗牛犬

TA贡献1784条经验 获得超2个赞

首先在控制器中建立组:


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

查看演示


查看完整回答
反对 回复 2019-10-18
  • 3 回答
  • 0 关注
  • 635 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信