使用angularJs ng-repeat如何做表格合併行效果，這裡有ng-reapt做表格合併的實例

本篇文章主要的講解了angularjs 用ng-repeat做成表格合併的效果，這裡有ng-repeat做成表格合併的實例，還不看過來。接下來我們一起來看這篇文章吧

描述

• 使用angularJs做出表格合併的效果

• #使用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相同的資料合併成一條，再進行遍歷。

（想看更多就到PHP中文網

angularjs學習手冊

中學習）

• 實作方案

首先對原始資料進行處理,在我這裡是把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></list.length>

#現在看html這裡，如果仍然在上進行ng-repeat,得不到預期效果。需要在上一層也就是 上遍歷，因為每個資料都包含欄位taskName，在做合併時只需要保留一個，使用ng-if='$index==0'控制。

    <tbody>
        <tr>
          <td>{{file.taskName}}</td>
          <td>{{item.fileName}}</td>
          <td>{{item.startTime}}</td>
          <td>
            <span>
              <a>下载</a>
              <span>删除</span>
            </span>
           </td>
        </tr>
    </tbody>

總結

在寫重新建構原數組的方法時遇到問題，寫的比較複雜，後來經過同事的點播，使用了現在比較簡潔的方式。 另外，實現的方式不只一種，我也試了其他的，都沒有這個簡單。

這篇文章到這裡就結束了（想看更多就到PHP中文網

angularjs學習手冊###中學習），有問題的可以在下方留言提問##### ####

以上是使用angularJs ng-repeat如何做表格合併行效果，這裡有ng-reapt做表格合併的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！