Question

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

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

并非每门课程都提供所有数据，这意味着如果学生尚未开始课程，则该数据不会出现在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，但是，我只是想弄清楚这个概念，然后可以在以后将其应用于datatables。

Answer 1

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

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

为避免在某些值不可用的情况下破坏表代码，只需将其放在span元素中，这样它仍会加载td且其中没有任何值。

Plunker Example

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

1 个答案: