Gayathri Menath Gayathri Menath - 7 months ago 75
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.


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

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


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


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 ng-repeat-end>
    <!-- you still have the student object available here -->