CODEWITHSUNDEEP
htmlangularjshtml-tableangularjs-ng-repeat
Levis
Levis

Reputation: 408

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

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:

enter image description here

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>

Upvotes: 2

Views: 491

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

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

Upvotes: 1

Numyx
Numyx

Reputation: 1758

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

Upvotes: 1

Related Questions