这篇文章主要介绍了关于使用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且值相等的行，期望效果如下图:
分析：首先看后端返回的数据，是个一维数组，直接使用ng-repeat遍历行(tr)得到的是一个不带合并效果的表格，如图:
怎么解决呢？想到的一种方案就是把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这里，如果仍然在<tr>上进行ng-repeat,得不到预期效果。需要在上一层也就是<tbody>上遍历，因为每条数据都包含字段taskname，在做合并时只需要保留一个，使用ng-if='$index==0'控制。    <tbody ng-repeat="file in tabledata">        <tr ng-repeat="item in file.filelist">          <td ng-if="$index ==0" rowspan="{{file.filelist.length}}">{{file.taskname}}</td>          <td>{{item.filename}}</td>          <td>{{item.starttime}}</td>          <td class="table-col-operate">            <span>              <a ng-click="capture.download(item.fileid)">下载</a>              <span class="text-red " ng-click="capture.deletecapture(item)">删除</span>            </span>           </td>        </tr>    </tbody>
总结在写重新构造原数组的方法时遇到问题，写的比较复杂，后来经过同事的点播，使用了现在比较简洁的方式。
另外，实现的方式不只一种，我也试了其他的，都没有这个简单。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
angularjs 文档阅读的指令scope
ztree获取勾选节点数据并且与表单信息合并
以上就是使用angularjs ng-repeat做表格合并行效果的详细内容。