samedi 9 mai 2015

Nesting ng-repeat at single level of DOM

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