Wie man "reiht" Tischreihen zusammen in eckigen?

Question

Ich habe ein Projekt, wo ich eine Liste von Kommentaren und Antworten auf ein Dokument anzeigen muss. Jeder Kommentar bezieht sich auf eine bestimmte Revision des Dokuments, und die Kommentarketten sollten in der Tabelle zusammenbleiben. Ich habe dies erreicht, indem ich das Dokument zuerst nach der Kommentarkettennummer sortiert habe, dann nach ID, so dass die neuesten Kommentare zuletzt in der Kette sind, dies funktioniert wie beabsichtigt (siehe Bild, grüne Zeilen gehören zu der Zeile über ihnen)

Jetzt ist das Problem, wenn ich den Tisch in irgendeiner Weise manipulieren möchte, brauche ich noch die Reihen, um in dieser Reihenfolge zu bleiben.

Lets sagen, ich möchte nach einem Wort in einem Kommentar suchen, ich möchte nicht nur die Zeile mit dem Ergebnis sehen, sondern die gesamte Kommentarkette von Zeilen, die zusammen gehören.

Wenn ich auf dem Bild nach Lorem suche, würde ich nur die Zeile mit Lorem bekommen, aber ich möchte die nächsten 2 auch sehen, wie sie auf die erste Zeile reagieren.

Ich verwende eckig und dachte, dass die Lösung einen benutzerdefinierten Filter schreiben könnte.

Gibt es eine Möglichkeit, die Zeilen miteinander zu verbinden?

<table class="table table-bordered" style="text-align: center;"> 
      <thead> 
       <tr> 
        <th>Unit no.</th> 
        <th>Item ref.</th> 
        <th>Rev.</th> 
        <th>Comment (client)</th> 
        <th>Response (XXX)</th> 
        <th>Code</th> 
        <th>Responsible</th> 
        <th>Closed in rev.</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="com in Document.Comments | filter:search" ng-class="{'active': com.ParrentCommentId != 0, 'success': com.ParentCommentId >0}"> 
        <td>{{com.ParentCommentId == 0 ? com.UnitNumber : "-"}}</td> 
        <td>{{com.ParentCommentId == 0 ? com.ItemRef : "-"}}</td> 
        <td>{{com.Revision}}</td> 
        <td>{{com.Comment}}</td> 
        <td>{{com.Response}}</td> 
        <td>{{com.ParentCommentId == 0 ? com.Code : "-"}}</td> 
        <td>{{com.ParentCommentId == 0 ? com.Responsible : "-"}}</td> 
        <td>{{com.ClosedInRevision}}</td> 
       </tr> 
      </tbody> 
     </table> 

Ich speichere die ID des parentcomment wenn der Kommentar zu einer Kette gehört, so dass der einzige Unterschied besteht darin, dass, wenn das parentCommentId Feld 0, ist der Kommentar ein Top-Level-Elternteil ist.

Answer 1

Ich habe dies behoben, indem ich anstatt alle Zeilen in einer Liste zu speichern, habe ich eine Liste von Listen mit den Zeilen erstellt. Dann habe ich ng-repeat-start verwendet, um eine weitere ng-Wiederholung von tr unter das erste Objekt in jedem Array einzufügen. Wenn also ein Top-Level-Kommentar Kinder hatte, würden diese eine Zeile darunter bekommen.

<table class="table table-bordered" style="text-align: center;"> 
      <thead> 
       <tr> 
        <th>Unit no.</th> 
        <th>Item ref.</th> 
        <th>Rev.</th> 
        <th>Comment (client)</th> 
        <th>Response (XXX)</th> 
        <th>Code</th> 
        <th>Responsible</th> 
        <th>Closed in rev.</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat-start="com in Document.Comments | filterComment:search.Comment" class="active"> 
        <td>{{com[0].UnitNumber}}</td> 
        <td>{{com[0].ItemRef}}</td> 
        <td>{{com[0].Revision}}</td> 
        <td>{{com[0].Comment}}</td> 
        <td>{{com[0].Response}}</td> 
        <td>{{com[0].Code}}</td> 
        <td>{{com[0].Responsible}}</td> 
        <td>{{com[0].ClosedInRevision}}</td> 
       </tr> 
       <tr ng-repeat-end ng-repeat="com2 in com" ng-if="!$first" class="success"> 
        <td>-</td> 
        <td>-</td> 
        <td>{{com2.Revision}}</td> 
        <td>{{com2.Comment}}</td> 
        <td>{{com2.Response}}</td> 
        <td>-</td> 
        <td>-</td> 
        <td>{{com2.ClosedInRevision}}</td> 
       </tr> 
      </tbody> 
     </table> 

Ich habe dann einen Filter, um die Suche Kommentare zu handhaben

app.filter("filterComment", function() { 
return function (items, searchText) { 
    var filtered = []; 
    if (!searchText) 
     return items; 
    angular.forEach(items, function (item) { 
     var found = false; 
     angular.forEach(item, function (commentClass) { 
      if (!found && commentClass.Comment.toUpperCase().includes(searchText.toUpperCase())) { 
       filtered.push(item); 
       found = true; 
      } 
     }); 
    }); 
    return filtered; 
}; 
});