Quentin Quentin - 4 days ago 4
AngularJS Question

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

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 ?

Answer

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