如何以角度将表格行“绑定”在一起？

Question

我有一个项目，我需要在其中显示 cmets 列表和对文档的回复。每个评论都针对文档的特定修订，并且评论链应该在表格中保持在一起。我通过首先按评论链编号对文档进行排序，然后按 id 对文档进行排序，因此最新的 cmets 在链中的最后一个，这按预期工作（见图，绿线属于它们上方的行）

现在的问题是，如果我想以任何方式操作表格，我仍然需要这些行保持这个顺序。

假设我想在评论中搜索某个词，我不仅想查看包含结果的行，还想查看属于同一行的整个评论链。

如果我在图片中搜索 Lorem，我只会得到带有 lorem 的行，但我希望接下来的 2 行以及它们对第一行的响应。

我正在使用 angular，并认为解决方案可能是编写自定义过滤器。

有没有办法将行“绑定”在一起？

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

如果评论属于链，我存储父评论的id，所以唯一的区别是如果parentCommentId字段为0，则评论是顶级父。

Answer 1

我没有将所有行存储在一个列表中，而是创建了一个包含行的列表列表，从而解决了这个问题。然后我使用 ng-repeat-start 在每个数组中的第一个对象下方包含另一个 tr 的 ng-repeat。因此，如果顶级评论有子评论，这些评论会在其下方出现一行。

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

然后我创建了一个过滤器来处理 cmets 的搜索

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;
};
});