如何使用ng-repeat渲染此不规则表？

Question

这里我有一个JSON数据如下：

[
{"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"}]}
]

现在我想将它渲染成不规则的表格，如图：

那么如何通过使用ng-repeat来实现呢？这确实是一个令人困惑的问题。 以下是制作上表的html代码：

<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

带有表/表行的

ng-repeat可能有点棘手。试图完成它，看起来有点难看，但它做的工作：

    <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

Answer 2

我建议您使用tbody代码，这样我们就需要两次申请ng-repeat代码，这样就可以了。

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