使用angularJs ng-repeat做表格合并行效果

这篇文章主要介绍了关于使用angularjs ng-repeat做表格合并行效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

描述

使用angularJs做出表格合并的效果

后端返回的数据

     [         {"fileName":"111.pcap.00","startTime":"2018-06-05 10:16:04","taskName":"111","taskId":58,"fileId":72},         {"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"111","taskId":58,"fileId":73},         {"fileName":"aaa.pcap.00","startTime":"2018-06-05 10:10:28","taskName":"aaa","taskId":57,"fileId":71},         {"fileName":"www.pcap.00","startTime":"2018-06-05 10:50:28","taskName":"www","taskId":59,"fileId":79}     ]

登录后复制

背景:

为了能更直观的查看表格中相同的taskName所包含的数据,合并列名为taskName且值相等的行,期望效果如下图:

1737610404-5b34a2a374349_articlex[1].png

分析:

首先看后端返回的数据,是个一维数组,直接使用ng-repeat遍历行(tr)得到的是一个不带合并效果的表格,如图:

3525796045-5b34a31560b24_articlex[1].png

怎么解决呢?想到的一种方案就是把taskName相同的数据合并成一条,再进行遍历。

实现方案

首先对原始数据进行处理,在我这里是把taskName相同的,合并成一条数据,重新处理以后的数据如下:

[    {"taskName":"111","fileList":[{"fileName":"111.pcap.00","startTime":"2018-06-05 10:16:04","taskName":"111","taskId":58,"fileId":72},{"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"111","taskId":58,"fileId":73}]},    {"taskName":"aaa","fileList":[{"fileName":"aaa.pcap.00","startTime":"2018-06-05 10:10:28","taskName":"aaa","taskId":57,"fileId":71}]},    {"taskName":"www","fileList":[{"fileName":"www.pcap.00","startTime":"2018-06-05 10:50:28","taskName":"www","taskId":59,"fileId":79}]}]

登录后复制

重新构造的方法如下,数组list便是处理的结果,只需要把list赋值给$scope变量便可在页面上使用

    var list = [];    angular.forEach(sourceData,function (item) {        for(var i=0;i<list.length;i++){            if(list[i].taskName === item.taskName){                list[i].fileList.push(item);                return;            }        }        list.push({            taskName:item.taskName,            fileList:[item]        });    });

登录后复制

现在看html这里,如果仍然在

上进行ng-repeat,得不到预期效果。需要在上一层也就是上遍历,因为每条数据都包含字段taskName,在做合并时只需要保留一个,使用ng-if=’$index==0’控制。

                      {{file.taskName}}          {{item.fileName}}          {{item.startTime}}                                    下载              删除                                   

登录后复制

总结

在写重新构造原数组的方法时遇到问题,写的比较复杂,后来经过同事的点播,使用了现在比较简洁的方式。
另外,实现的方式不只一种,我也试了其他的,都没有这个简单。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

AngularJS 文档阅读的指令scope

以上就是使用angularJs ng-repeat做表格合并行效果的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2746646.html

(0)
上一篇 2025年3月8日 04:10:56
下一篇 2025年3月8日 04:11:05

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • AngularJS导出Excel指令

    这篇文章主要介绍了关于angularjs导出excel指令,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 Excel导出思路 参考文章 – angularjs使用指令实现table导出csv 项目中使用到了导出E…

    2025年3月8日 编程技术
    200
  • AngularJS 前台分页实现

    这篇文章主要介绍了关于angularjs 前台分页实现,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 分页思路 考评员查询,因为整体的数据量比较小,所以我们可以将分页放到前台进行处理。 其实分页的原理也很简单,我们根据分页选…

    2025年3月8日
    200
  • Jquery以及AngularJS中Get/Post的传参

    这篇文章主要介绍了关于jquery以及angularjs中get/post的传参,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 传参并不是很难的事,但有时牵扯到例如要传一个对象或者form到后端的时候就会有些麻烦,在这里总结…

    2025年3月8日
    200
  • 如何在Vue项目中添加动态浏览器头部title的问题

    这篇文章主要介绍了关于如何在vue项目中添加动态浏览器头部title的问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 0.   直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1.    实现思路 …

    2025年3月8日
    200
  • 如何用D3.js实现拓扑图

    这篇文章主要介绍了关于如何用d3.js实现拓扑图,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 最近写项目需要画出应用程序调用链的网路拓扑图,完全自己写需要花费些时间,那么首先想到的是echarts,但echarts的自定义…

    2025年3月8日
    200
  • 关于JS中new调用函数的原理介绍

    这篇文章主要介绍了关于js中new调用函数的原理介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 JavaScript 中经常使用构造函数创建对象(通过 new 操作符调用一个函数),那在使用 new 调用一个函数的时候到…

    编程技术 2025年3月8日
    200
  • 基于vue.js的dialog插件art-dialog-vue2.0的发布内容

    这篇文章主要介绍了关于基于vue.js的dialog插件art-dialog-vue2.0的发布内容,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 art-dialog-vue —— 经典、优雅的网页对话框控件 优点 支持普…

    编程技术 2025年3月8日
    200
  • 关于Angular中响应式表单的介绍

    这篇文章主要介绍了关于angular中响应式表单的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 响应式表单是在组件类中编写逻辑,验证规则,这与在模板中完成控制的模板驱动式表单不同。响应式表单反应形式是灵活的,可用于处理…

    编程技术 2025年3月8日
    200
  • 创建quick-shell.js库的使用介绍

    这篇文章主要介绍了关于创建quick-shell.js库的使用介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 quick-shell.js简介 一直想自己发布一个npm包试试,正巧刚刚学完操作系统,写了很多shell类型…

    编程技术 2025年3月8日
    200
  • 关于react父子组件之间的传值问题解析

    这篇文章主要介绍了关于react父子组件之间的传值问题解析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 父组件传递给子组件:核心思路就是将父组件中的state传递给子组件 父组件代码:class Father extend…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论