Javascript AngularJS：如何构建具有多层数据的HTML表？

我需要从一些数据中创建一个具有多个级别的数组和子数组的表。我已经找到了一些解决方案，只要我只有两个级别的数组，但没有一个可以处理更多的数组

例如，以下面的示例数据为例--

你有一些教授，每个教授都有一些学科，每个学科都有一些学生。我想创建一个表格报告，显示所有教授及其所有学科、学生和成绩。为了做到这一点，我需要一个如下的表格--

我发现的解决方案为每个教授（在本例中）生成多个

tbody

元素，其中

ng repeat

，然后为该教授的每个“类”生成另一个

ng repeat

。像--

{{prof.name}
{{c.name}}

---

其他人使用

ng repeat start

和

ng repeat end

，但深度不超过两级。在这种情况下，学生们有没有办法再增加一个级别？

在经历了许多挫折和挠头之后，我找到了一种方法，使用

ng repeat start

<table>
    <tbody>
        <tr ng-repeat-start="p in professors" ng-if="false"></tr>
        <tr ng-repeat-start="c in p.classes" ng-if="false"></tr>
        <tr ng-repeat="s in c.students">
            <th ng-if="$parent.$first && $first" rowspan="{{p.count}}">
                {{p.name}}
            </th>
            <th ng-if="$first" rowspan="{{c.students.length}}">{{c.name}}</th>
            <td>{{s.name}}</td>
            <td>{{s.grade}}</td>
        </tr>
        <tr ng-repeat-end ng-if="false"></tr> <!-- classes -->
        <tr ng-repeat-end ng-if="false"></tr> <!-- professors -->
    </tbody>
</table>

{{p.name}}
{{c.name}}
{{s.name}}
{{s.grade}}

此解决方案生成有效的HTML表标记。通过在

ng repeat-*

元素上使用

ng if=“false”

，它们在数组中迭代，但在页面上不生成实际的元素。生成的唯一元素是c.students中

s中的
tr
行

我需要做的另一件事是在名为
count
的
professor
对象中创建一个新属性，该属性保存所有类中注册的学生总数。对于
行span
，我需要它，当我从服务器获取数据时，动态生成数据当然很简单。
为什么你不能在教授班上做
。学生们
？我不确定我是否理解。我会在什么元素中使用它？另外，
prof.classes
是一个数组，它没有
students
属性。还是我遗漏了什么？在
$scope.professors
中，classes数组中有一个students数组。
ng repeat
属性只是在其中循环，因此在您的td中，使用
c.name
创建一个新表，使用
ng repeat=“s in prof.class.students”
I进行更新，使其成为一个更好的示例。无论如何，我明白你的意思；我完全可以在c.students中使用带有
s的嵌套表，但这并不是我真正想要的。我真的很想创建一个类似我作为示例发布的表。如果使用
ng repeat
，可能无法执行此操作？我想我需要一些方法来使用
ng repeat
，而不创建子元素，以便我只在最里面的
ng repeat
中创建
tr
元素（在我的例子中，
students
）。谢谢你！您是否正在生成要打印的报告？如果不是这样，这个布局可能会变得太忙。您是否已根据需要使用可展开树来显示下一级数据？
<table>
    <tbody>
        <tr>
            <th rowspan="4">Albert Einstein</th>
            <th rowspan="2">Physics 101</th>
            <td>Joe</td>
            <td>B</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>A</td>
        </tr>
        <tr>
            <th rowspan="2">Physics 201</th>
            <td>Gunther</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Hans</td>
            <td>C</td>
        </tr>
        <tr>
            <th rowspan="4">Charles Darwin</th>
            <th rowspan="2">Biology 101</th>
            <td>Danielle</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Anne</td>
            <td>A</td>
        </tr>
        <tr>
            <th rowspan="2">Biology 201</th>
            <td>Frida</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Fritz</td>
            <td>F</td>
        </tr>
    </tbody>
</table>

|------------------|-------------|----------|---|
| Albert Einstein  | Physics 101 | Joe      | B |
|                  |             | Mary     | A |
|                  | ------------|----------|---|
|                  | Physics 201 | Gunther  | C |
|                  |             | Hans     | C |
|------------------|-------------|----------|---|
| Charles Darwin   | Biology 101 | Danielle | A |
|                  |             | Anne     | A |
|                  |-------------|----------|---|
|                  | Biology 201 | Frida    | A |
|                  |             | Fritz    | F |
|------------------|-------------|----------|---|

<table>
    <tbody ng-repeat="prof in professors">
        <tr ng-repeat="c in prof.classes">
            <th ng-if="$first" rowspan="{{prof.classes.length}}">{{prof.name}}</th>
            <td>{{c.name}}</td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr ng-repeat-start="p in professors" ng-if="false"></tr>
        <tr ng-repeat-start="c in p.classes" ng-if="false"></tr>
        <tr ng-repeat="s in c.students">
            <th ng-if="$parent.$first && $first" rowspan="{{p.count}}">
                {{p.name}}
            </th>
            <th ng-if="$first" rowspan="{{c.students.length}}">{{c.name}}</th>
            <td>{{s.name}}</td>
            <td>{{s.grade}}</td>
        </tr>
        <tr ng-repeat-end ng-if="false"></tr> <!-- classes -->
        <tr ng-repeat-end ng-if="false"></tr> <!-- professors -->
    </tbody>
</table>