angular.js: A Table from nested data structure?

Question

I have the following data structure: a list of courses, and for every course, a list of semesters. I need to build a table with a row for every semester of every course, and a column with the course's name which spans all the rows for that course.

I'm trying to use angular to generate the table, but because the data structure is nested I can't simply do ng-repeat in the tr tag. So I tried doing this:

<table border="1">
    <div ng-repeat="course in data">
        <tr>
            <td rowspan="{{course.semesters.length}}">{{course.name}}/td>
        </tr>
        <tr ng-repeat="semester in course.semesters">
           <td>{{semester.info}}</td>
        </tr>
    </div>
</table>

This utterly fails - the table is generated outside the repeated div. Seems to me I'm missing something basic about how ng-repeat works.

Michael Kang · Accepted Answer · 2015-04-13 07:14:56Z

3

Try tbody instead of div:

<table border="1">
    <tbody ng-repeat="course in data">
        <tr>
            <td rowspan="{{course.semesters.length}}">{{course.name}}/td>
        </tr>
        <tr ng-repeat="semester in course.semesters">
           <td>{{semester.info}}</td>
        </tr>
    </tbody>
</table>

answered Apr 13, 2015 at 7:14

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gadi A Over a year ago

Thanks, it works! However, I still wonder what I am missing and why tbody works but div does not. I naively assumed that ng-repeat blindly copies everything inside the tag it's in.

harrya Over a year ago

The div does not work because html will prepend any div tags not inside a tr/td element above the table, I ran into a similar problem.

Collectives™ on Stack Overflow

angular.js: A Table from nested data structure?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related