How can I render this irregular table with ng-repeat? - html

Question

Here I have a JSON data as below:
[
{"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"}]}
]
And now I want to render it into an irregular table like the picture:
So how can I make it possible by using ng-repeat? It's really a confusing problem.
Here is the html code that makes the table above:
<tr style="height:40px" >
<td rowspan="2" style="text-align:center;background:#FFD4D4;font-weight:bold;">Tom</td>
<td style="text-align:center;font-size:15px;font-weight:bold;">stuA</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectA</td>
</tr>
<tr style="height:40px;">
<td style="text-align:center;font-size:15px;font-weight:bold;">stuB</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectB</td>
</tr>
<tr style="height:40px">
<td rowspan="3" style="text-align:center;background:#FFD4D4;font-weight:bold;">Jerry</td>
<td style="text-align:center;font-size:15px;font-weight:bold;">stuC</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectC</td>
</tr>
<tr style="height:40px;">
<td style="text-align:center;font-size:15px;font-weight:bold;">stuD</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectD</td>
</tr>
<tr style="height:40px;">
<td style="text-align:center;font-size:15px;font-weight:bold;">stuE</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectE</td>
</tr>

Answer 1

I'd suggest you to take use of tbody tag so that we need to apply to ng-repeat tag twice, that would do the trick for you.
Makrup
<table class="table table-bordered">
<thead></thead>
<tbody ng-repeat="teacher in teachers">
<tr ng-repeat="student in teacher.student">
<td ng-if="$first" rowspan="{{teacher.student.length}}">{{teacher.teacher}}</td>
<td>{{student.name}}</td>
<td>{{student.project}}</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
Demo Plunkr

Answer 2

ng-repeat with tables/table rows can be a bit tricky. Tried to get it done, looks a bit ugly but it does the work:
<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>
Plunker: http://plnkr.co/edit/yUPEGdofvwMipcX7CpDK?p=preview