angularjs table : tr with category using ng-repeat with list

angularjs, angularjs-ng-repeat, html-table, javascript

Solution

Nested repeats and the new `ng-repeat-start`/`ng-repeat-end` and remembering that it is OK for a `<table>` to have many bodies and heads:

<table>
    <thead ng-repeat-start="x in data">
        <tr><th>{{x.categoryName}}</th></tr>
    </thead>
    <tbody ng-repeat-end>
        <tr ng-repeat="y in x.items">
            <td>{{y.name}}</td>
        </tr>
    </tbody>
</table>

Relevant fiddle: http://jsfiddle.net/kGZt8/

Documentation: ngRepeat

Problem

Given the following model : ``` [{categoryName: "category1", items:[{name:"item1.1"}{name:"item1.2"},...]}, {categoryName: "category2", items:[{name:"item2.1"},...]},...] ``` I'd like to create this table : ``` <table> <tr> <th>category1</th> </tr> <tr> <td>item1.1</td> </tr> <tr> <td>item1.2</td> </tr> ... <tr> <th>category2</th> </tr> <tr> <td>item2.1</td> </tr> ... </table> ``` How would you do it using angularjs instructions ?

Original source