尝试使用两个不同的数组用 ng-repeat 填充 html table

Question

我在尝试用两个数组填充 table 时遇到了一些问题。我正在尝试实现以下输出：

我有一个名为 students 的数组，在每个学生对象中，我有一个 courses 数组。我正在尝试使用 ng-repeat 填充我的 table 以显示针对每个学生的所有课程。

并非所有数据都在每门课程中给出，这意味着如果学生尚未开始课程，则它不会出现在 courses 数组中。此外，如果学生尚未完成课程，则不会给出完成日期。

所以我的数组看起来像这样：

$scope.students = [
    {
        Id: 1,
        Name: 'Joe Blogs',
        Courses: [
            {
                Title: 'Course 1',
                Grade: 87,
                Completed: true,
                DateCompleted: '2018-01-01'
            },
            {
                Title: 'Course 2',
                Grade: 2,
                Completed: false
            }
        ]
    },
    {
        Id: 2,
        Name: 'Peter Smith',
        Courses: [
            {
                Title: 'Course 1',
                Grade: 100,
                Completed: true,
                DateCompleted: '2018-01-01'
            },
            {
                Title: 'Course 2',
                Grade: 95,
                Completed: true,
                DateCompleted: '2018-01-01'
            },
            {
                Title: 'Course 3',
                Grade: 10,
                Completed: false
            }
        ]
    },
    {
        Id: 3,
        Name: 'Joanne Someone',
        Courses: [
            {
                Title: 'Course 3',
                Grade: 55,
                Completed: false,
            }
        ]
    }
]

到目前为止，我的代码片段如下所示：

                <table class="table table-hover" width="100%">

                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Course</th>
                            <th>Grade</th>
                            <th>Completed</th>
                            <th>Date Completed</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="student in students">
                            <td>{{ student.Id }}</td>
                            <td>{{ student.Name }}</td>
                            <td>
                                <!-- Can't figure this bit out -->
                            </td>
                        </tr>
                    </tbody>

                </table>

但我对如何让多个课程针对每个学生展示感到困惑。我还发现，通过使用 ng-repeat，如果某个值不在对象中（例如完成日期），那么该字段将不会显示并将所有内容向上推，并且不对齐。

最后，我会提到我正在使用 angular-datatables 但是，我只是想弄清楚这个概念，然后我可以将它应用到 datatable 秒后。

Answer 1

为此，您必须使用 rowspan。并且特定 Id 的值的长度应为 Courses。然后，您需要在 tbody 上使用 ng-repeat 来重复 tbody 部分，并在 tr 上使用 ng-repeat 来重复每个学生的 Courses 数组。因此，您的 table 查看代码可以是：

<table>
<thead>
  <tr>
    <td>Id</td>
    <td>Name</td>
    <td>Course</td>
    <td>Grade</td>
    <td>Completed</td>
    <td>Date Completed</td>
  </tr>
</thead>
<tbody ng-repeat="x in students">
  <tr>
    <td rowspan="{{x.Courses.length}}"><span>{{ x.Id }}</span></td>
    <td rowspan="{{x.Courses.length}}"><span>{{ x.Name }}</span></td>
    <td><span>{{x.Courses[0].Title}}</span></td>
    <td><span>{{x.Courses[0].Grade}}</span></td>
    <td><span>{{x.Courses[0].Completed}}</span></td>
    <td><span>{{x.Courses[0].DateCompleted}}</span></td>
  </tr>
  <tr ng-repeat="item in x.Courses" ng-if="$index > 0">
    <td><span>{{item.Title}}</span></td>
    <td><span>{{item.Grade}}</span></td>
    <td><span>{{item.Completed}}</span></td>
    <td><span>{{item.DateCompleted}}</span></td>
  </tr>
</tbody>
</table>

为了避免在某些值不可用时破坏 table 代码，只需将其放在 span 元素中，这样它仍然会加载 td 而其中没有任何值。

Plunker Example

尝试使用两个不同的数组用 ng-repeat 填充 html table

Trying to populate html table with ng-repeat using two different arrays

html-table

angularjs

angularjs-ng-repeat