时间戳

首页 > 解决方案 > 在空白 Angulajs 中插入 td

angularjs - 在空白 Angulajs 中插入 td

问题描述

我是编程新手，但我坚持使用 Angularjs 中的一个项目，这是一项简单的任务，即在 html 表中添加一个没有任何数据的空白行，以便您可以注意到“质量”字段对组的分隔，因此，以更有序的方式查看它。

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

HTML 视图 在此处输入图像描述

我画了一条红线，我想在其中插入空白行。 在此处输入图像描述

标签： angularjs

解决方案

您可以做的是使用此解决方案pieces对对象数组进行分组： https ://stackoverflow.com/a/14696535/9939798 。quality

您的控制器的示例代码：

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/

推荐阅读