AngularJS：如何構建具有多層深度數據的HTML表？

Question

我需要從一些具有多級數組和子數組的數據創建一個表。 我已經找到了一些解決方案，只要我只有兩個級別的數組，但沒有一個可以用於更多的數組。

例如，下面的示例數據 -

$scope.professors = [{
    'name': 'Albert Einstein',
    'classes': [{
        'name': 'Physics 101',
        'students': [{
            'name': 'Joe',
            'grade': 'B'
        }, {
            'name': 'Mary',
            'grade': 'A'
        }]
    }, {
        'name': 'Physics 201',
        'students': [{
            'name': 'Gunther',
            'grade': 'C'
        }, {
            'name': 'Hans',
            'grade': 'C'
        }]
    }]
}, {
    'name': 'Charles Darwin',
    'classes': [{
        'name': 'Biololgy 101',
        'students': [{
            'name': 'Danielle',
            'grade': 'A'
        }, {
            'name': 'Anne',
            'grade': 'A'
        }]
    }, {
        'name': 'Biology 201',
        'students': [{
            'name': 'Frida',
            'grade': 'A'
        }, {
            'name': 'Fritz',
            'grade': 'F'
        }]
    }]
}];

你有一些教授，每個教授都有一些學科，每個學科都有一些學生注冊。 我想創建一個表格報告，顯示所有教授以及他們的所有學科，學生和成績。 為了做到這一點，我需要一個如下表所示的表 -

<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 |
|------------------|-------------|----------|---|

我已經找到了解決方案生成多個tbody的元素ng-repeat每個教授（在這種情況下），然后又ng-repeat上一個tr每個“類”為教授。 喜歡 -

<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>

其他人使用ng-repeat-start和ng-repeat-end但不超過兩個級別。 有沒有辦法再增加一個級別 - 在這種情況下，學生 - 這個？

Answer 1

經過很多挫折和頭疼，我找到了一種方法，使用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>

此解決方案生成有效的HTML表標記。 通過在ng-repeat-*元素上使用ng-if="false" ，它們遍歷數組但在頁面上不生成實際元素。 生成的唯一元素是s in c.students中s in c.students的tr行。

我需要做的另一件事是在名為count的professor對象中創建一個新屬性，該對象包含在所有類中注冊的學生總數。 對於rowspan我需要它，當我從服務器獲取數據時，它當然很容易生成。