Verwendung von AngularJs, um den Effekt der Tabellenzusammenführung zu erzeugen
Das Vom Client zurückgegebene Daten
[
{"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}
]Um die im selben TaskName in der Tabelle enthaltenen Daten intuitiver anzuzeigen, führen Sie die Spalten mit den Namen TaskName und Have zusammen gleiche Werte. OK, der erwartete Effekt ist wie folgt:
Sehen Sie sich zunächst die vom Backend zurückgegebenen Daten an Es handelt sich um ein eindimensionales Array. Die direkte Verwendung von ng-repeat zum Durchlaufen von Zeilen (tr) führt zu einer Tabelle ohne Zusammenführungseffekt, wie in der Abbildung gezeigt:
Wie kann man es lösen? Eine Lösung, die mir in den Sinn kommt, besteht darin, Daten mit demselben Aufgabennamen zu einer zusammenzuführen und diese dann zu durchlaufen.
(Wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website AngularJS-Lernhandbuch , um mehr zu erfahren)
Zuerst werden die Originaldaten verarbeitet. In meinem Fall werden die Daten nach der erneuten Verarbeitung wie folgt zusammengeführt:
[
{"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}]}
]Die Rekonstruktion Die Methode lautet wie folgt, und die Array-Liste ist die Verarbeitung. Daher müssen Sie nur den Listenwert der Variablen $scope zuweisen, um ihn auf der Seite zu verwenden. Es muss auf der vorherigen Ebene durchlaufen werden, nämlich
, da jedes Datenelement das Feld taskName enthält und beim Zusammenführen nur eines beibehalten werden muss, wobei die Steuerung ng-if='$index==0' verwendet wird . var list = [];
angular.forEach(sourceData,function (item) {
for(var i=0;i<list.length><p>Zusammenfassung</p></list.length>AngularJS-Lernhandbuch
, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen
Das obige ist der detaillierte Inhalt vonSo verwenden Sie angleJs ng-repeat, um den Effekt der Tabellenzusammenführung zu erzielen. Hier finden Sie Beispiele für die Tabellenzusammenführung durch ng-reapt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
