如何使用ng-repeat渲染这个不规则的表?

Here I have a JSON data as below:

这里有如下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"}]}
]

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:

那么，我如何才能通过使用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>

2 个解决方案

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

我建议您使用tbody tag，这样我们需要对ng-repeat tag应用两次，这对您很有帮助。

Makrup

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

演示Plunkr

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

使用表/表行进行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

砰砰作响:http://plnkr.co/edit/yUPEGdofvwMipcX7CpDK?p=preview