I have nested collections, as follows:
[
{
name: "foo",
members: ["foo1","foo2"]
}, {
name: "bar",
members: ["bar1","bar2","bar3"]
}, {
name: "qux",
members: []
}
]
From this, I would like to generate the following markup:
<tbody>
<tr>
<th scope="row" rowspan="2">foo</th>
<td>foo1</td>
</tr><tr>
<td>foo2</td>
</tr><tr>
<th scope="row" rowspan="3">bar</th>
<td>bar1</td>
</tr><tr>
<td>bar2</td>
</tr><tr>
<td>bar3</td>
</tr>
</tbody>
It would also be acceptable to repeat the <th>
cells in each row, if rowspan
proves too awkward to work with:
<tbody>
<tr>
<th scope="row">foo</th>
<td>foo1</td>
</tr><tr>
<th scope="row">foo</th>
<td>foo2</td>
</tr><tr>
<th scope="row">bar</th>
<td>bar1</td>
</tr><tr>
<th scope="row">bar</th>
<td>bar2</td>
</tr><tr>
<th scope="row">bar</th>
<td>bar3</td>
</tr>
</tbody>
What is the idiomatic way to accomplish a task like this using AngularJS? In particular, I'm struggling to see how one can perform a nested ng-repeat
at a single level of the DOM (i.e. on the <tr>
element).
Aucun commentaire:
Enregistrer un commentaire