尝试用ng填充HTML表,重复使用两个不同的数组

$scope.students=[
{
身份证:1,
name:'joe blogs',
课程:[
{
标题:“课程1”,
等级:87,
完成:正确,
完成日期:2018-01-01
}
{
标题:'课程2',
等级:2,
已完成:假
}
]
}
{
身份证:2,
姓名:'彼得·史密斯',
课程:[
{
标题:“课程1”,
等级:100,
完成:正确,
完成日期:2018-01-01
}
{
标题:'课程2',
等级:95,
完成:正确,
完成日期:2018-01-01
}
{
标题:“课程3”,
等级:10,
已完成:假
}
]
}
{
身份证:3,
姓名:'Joanne someone',
课程:[
{
标题:“课程3”,
等级:55,
已完成:错误,
}
]
}
]
到目前为止,我的代码片段如下所示:

<table class=“table table hover”width=“100%”>

<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>课程</th>
<th>等级</th>
<th>已完成</th>
<th>完成日期</th>
</tr>
</thead>
<t车身>
<tr ng repeat=“学生中的学生”>
<td>student.id</td>
<td>student.name</td>
<td>
和LT;!--无法计算出这一点-->
</td>
</tr>
</t车身>

</table>
但我一直在学习如何让每个学生参加多个课程。此外,我还发现,通过使用ng repeat,如果对象中没有值(例如,日期已完成),则该字段将不会显示并向上推送所有内容,使其不对齐。


最后,我将提到我正在使用角度数据表,但是,我只是在尝试制定概念,然后我可以稍后将其应用于数据表。


我有一个数组students在每个学生对象中,我都有一个courses数组。我正试图用ng-repeat显示每个学生的所有课程。

并非所有数据都在每门课程中给出,这意味着如果学生没有开始一门课程,那么它就不会出现在课程数组。另外,如果一个学生没有完成一门课程,就不会给出完成日期。

所以我的数组看起来是这样的:

$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重复,如果一个值不在对象中(例如,完成日期),则该字段将不会显示并向上推送所有内容,使其不对齐。

最后,我将提到我使用的是角度数据表,但是,我只是在尝试解决这个概念,然后我可以稍后将其应用到数据表中。