How to use angularJs ng-repeat to achieve the effect of table merging rows. Here are examples of ng-reapt doing table merging.

This article mainly explains angularjs The effect of using ng-repeat to merge tables. Here are examples of ng-repeat to merge tables. I haven’t seen it yet. Next, let’s take a look at this article

Description

• The effect of using angularJs to merge tables

• After The data returned by the end

     [
         {"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}
     ]

Background:

In order to more intuitively view the data contained in the same taskName in the table, merge the columns with the same taskName and equal values. OK, the expected effect is as follows:

Analysis:

First look at the data returned by the backend, it is a one-dimensional array, directly Using ng-repeat to traverse rows (tr) results in a table without merging effect, as shown in the figure:

How to solve it? One solution that comes to mind is to merge data with the same taskName into one and then traverse it.

(If you want to see more, go to the PHP Chinese website angularjs learning manual to learn)

Implementation plan

• First of all, The original data is processed. In my case, the same taskName is merged into one piece of data. The data after reprocessing is as follows:

[
    {"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}]}
]

The reconstruction method is as follows, and the array list is processed As a result, you only need to assign the list value to the $scope variable to use it on the page.

    var list = [];
    angular.forEach(sourceData,function (item) {
        for(var i=0;i<list.length><ul class=" list-paddingleft-2"><li>
<p> Now look at the html here. If you still perform ng-repeat on </p>
<tr>, you can Not as expected. It is necessary to traverse the previous layer, that is, </tr>
<tbody>, because each piece of data contains the field taskName, and only one needs to be retained when merging, using ng-if='$index==0' control. <pre class="brush:php;toolbar:false">    <tbody>
        <tr>
          <td>{{file.taskName}}</td>
          <td>{{item.fileName}}</td>
          <td>{{item.startTime}}</td>
          <td>
            <span>
              <a>下载</a>
              <span>删除</span>
            </span>
           </td>
        </tr>
    </tbody>

Summary

I encountered a problem when writing a method to reconstruct the original array. The writing was relatively complicated. Later, after being requested by a colleague, I used the simpler method now. Way.
In addition, there is more than one way to achieve it. I have also tried others, but they are not as simple as this.

This article ends here (if you want to see more, go to the PHP Chinese website angularjs Learning Manual). If you have any questions, you can leave a message below

The above is the detailed content of How to use angularJs ng-repeat to achieve the effect of table merging rows. Here are examples of ng-reapt doing table merging.. For more information, please follow other related articles on the PHP Chinese website!