So 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.

Dieser Artikel erklärt hauptsächlich die Wirkung von angularjs mit ng-repeat zum Zusammenführen von Tabellen. Schauen Sie sich das noch nicht an. Schauen wir uns als Nächstes diesen Artikel an

Beschreibung

• 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}
     ]

Hintergrund:

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:

Analyse:

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)

Implementierungsplan

• 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>

Beim Schreiben einer Methode zur Rekonstruktion des ursprünglichen Arrays war das Schreiben relativ kompliziert Verwendet jetzt die einfachere Methode Way.

Darüber hinaus gibt es mehr als eine Möglichkeit, es umzusetzen. Ich habe auch andere ausprobiert, aber sie sind nicht so einfach.

Dieser Artikel endet hier (wenn Sie mehr lesen möchten, besuchen Sie die PHP-Chinesisch-Website

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!