Question

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

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

假设我想在评论中搜索某些单词，我不仅要查看带有结果的行，还要查看属于一起的整个行的注释链。

如果我在图片中搜索Lorem，我只会获得lorem的行，但我希望接下来的2还可以看到它们是如何响应第一行的。

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

有没有办法去＆＃34;绑定＆＃34;这些行在一起？

<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在每个数组中的第一个对象下面包含另一个ng-repeat tr。因此，如果顶级评论有孩子，那么这些评论会在其下方排成一行。

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

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

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

怎么去＆＃34;绑定＆＃34;表格以角度排列在一起？

1 个答案: