在AngularJS中爲ng-repeat的多個級別設置表格

Question

我們在客戶的網站上設置了各種數據的報告。大多數報告的結構是這樣的：

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

我們使用這樣的事情

<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 

我知道Tbodys不能嵌套。我期望避免使用多個表格，因爲如果所有列都正確排列，這將是一個巨大的痛苦。任何已知的解決方案，像這樣？

Answer 1

爲什麼不將每個組渲染爲自己的表並使用css控制列寬？你甚至可以使用角度表達式來獲得一個動態的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>