数据
[{
"teacher": "Tom",
"student": [{
"name": "stuA",
"project": "projectA"
}, {
"name": "stuB",
"project": "projectB"
}]
}, {
"teacher": "Jerry",
"student": [{
"name": "stuC",
"project": "projectC"
}, {
"name": "stuD",
"project": "projectD"
}, {
"name": "stuE",
"project": "projectE"
}]
}, {
"teacher": "Lee",
"student": [{
"name": "stuF",
"project": "projectF"
}]
}]
html代码
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@2.0.0-alpha.25" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
table, tr, td{
border:1px solid black;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<table>
<tbody>
<tr ng-repeat-start="group in data">
<td ng-bind="group.teacher" rowspan="{{group.student.length}}"></td>
<td ng-bind="group.student[0].name"></td>
<td ng-bind="group.student[0].project"></td>
</tr>
<tr ng-repeat="student in group.student | limitTo : group.student.length - 1 : 1">
<td ng-bind="student.name"></td>
<td ng-bind="student.project"></td>
</tr>
<tr ng-repeat-end></tr>
</tbody>
</table>
</body>
</html>
实现效果