在 AngularJS 中为多级 ng-repeat 设置 table

Question

我们在客户的站点上设置了包含各种数据的报告。大多数报告的结构类似于：

Headers
[Group 1 rows]
Group 1 totals
[Group 2 rows]
Group 2 totals
...
[Group x rows]
Group x totals
Grand totals

我们在 table 中使用类似这样的东西

完成了这个

<table>
<th>...</th>
<tbody ng-repeat="group in data">
<tr ng-repeat="row in data">...</tr>
<tr>group totals</tr>
</tbody>
<tr>grand totals</tr>
</table>

我正在尝试设计一份需要多级循环的报告。该结构看起来更像这样：

Headers
| [Group 1.1.1 rows]
| Group 1.1.1 totals
| [Group 1.1.2 rows]
| Group 1.1.2 totals
Group 1.1 Totals
| [Group 1.2.1 rows]
| Group 1.2.1 totals
| [Group 1.2.2 rows]
| Group 1.2.2 totals
Group 1.2 Totals
Group 1 Totals
...
| [Group x.1.1 rows]
| Group x.1.1 totals
| [Group x.1.2 rows]
| Group x.1.2 totals
Group x.1 Totals
Group x Totals
Grand Totals

我知道 Tbody 不能嵌套。我希望避免使用多个 table，因为让所有列都正确排列会非常痛苦。有任何已知的解决方案吗？

Answer 1

为什么不将每个组呈现为自己的 table 并使用 css 控制列宽？您甚至可以使用 angular 表达式来获取取决于数据列的动态 td 宽度。

<ANY class="ng-style: ;"> ... </ANY>

例如

<section ng-repeat="group in data">
    <table class="dataTables">
    <th>...</th>
    <tbody>
        <tr ng-repeat="row in data">...</tr>
        <tr>group totals</tr>
    </tbody>
    </table>
</section>

在 AngularJS 中为多级 ng-repeat 设置 table

Setting up a table for multiple levels of ng-repeat in AngularJS

html-table

angularjs

angularjs-ng-repeat