在空白Angularjs中插入td

Question

我是编程新手，但我被 Angularjs 中的一个项目困住了，这是一项简单的任务，即在 html 表中添加一个没有任何数据的空白行，这样您就可以注意到质量字段与组的分离，因此，以更有序的方式看待它。

当质量数据发生变化时，必须插入行来分隔以下信息。明白了吗？

HTML 视图 enter image description here

我画了一条红线，我想在其中插入空白行。 enter image description here

Answer 1

您可以使用以下解决方案将 pieces 对象数组按 quality 分组：https://stackoverflow.com/a/14696535/9939798。

控制器的示例代码：

function groupBy(arr, property) {
    return arr.reduce(function (memo, x) {
        if (!memo[x[property]]) { memo[x[property]] = []; }
        memo[x[property]].push(x);
        return memo;
    }, {});
}

$scope.pieces = [
    { quality: "602P10D", status: "Dispatched" },
    { quality: "602P10D", status: "Dispatched" },
    { quality: "6025098", status: "Dispatched" },
    { quality: "6025098", status: "Dispatched" }
];

$scope.grouped = groupBy($scope.pieces, 'quality');

示例表标记：

<table>
    <thead>
        <tr>
            <th>Quality</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody ng-repeat="pieces in grouped">
        <tr ng-repeat="data in pieces">
            <td>{{ data.quality }}</td>
            <td>{{ data.status }}</td>
        </tr>
        <tr>
            <td colspan="2"><!-- This is the separator --></td>
        </tr>
    </tbody>
</table>

在这里工作：https://jsfiddle.net/75ez2nkw/1/