Gayathri Menath Gayathri Menath - 1 month ago 10
AngularJS Question

Angular js: How to use 'loop inside loop' in html tables

I have a json structure like

studentList = [
{
'name': 'name',
'isNew': True,
'class': 'class',
'subjects': [
{
'name': 'subname',
'mark': 70
}, {
'name': 'subname2',
'mark': 80
},
]
},
.....
]


I am trying to put this data inside an html table. The below code is not working for me.

<table>
.....

<tbody>
<div ng-repeat="student in student_list">
<tr ng-class='{in:$first}'> New Student </tr>
<div ng-if="student.isNew">
<tr>
<td> {{student.name}} </td>
<td> {{student.class}} </td>
<div ng-repeat="(key, subject) in student.subjects>
<td> {{subject.name}} </td>
<td> {{subject.mark}} </td>
</div>
</tr>
</div>

// Old student
<tr ng-class='{in:$first}' > Old Student </tr>
....

</div>
</tbody>




If I didn't use
<div>
, I can loop through the table. But for the above table structure, how can I represent data using angular.

Answer

A div element is not valid for a direct child of the tbody element. Just add the ng-repeat to the tr element.

If you need to repeat over 2 tr elements at once, you can use the ng-repeat-start directive:

<tr ng-repeat-start="student in student_list">
    <!-- .. -->
</tr>
<tr ng-repeat-end>
    <!-- you still have the student object available here -->
</tr>