How can I use ng-repeat in a table body to encompass multiple rows?

Question

I'm trying to transition from jsRender to AngularJs and can't seem to figure out how to generate multiple table rows with ng-repeat.

I need to generate two table rows per ng-repeat, these rows are related to each other. The second row is actually a hidden row that expands out like an accordion. This works perfectly fine with renderJs:

With renderJs:

<table>
  <thead>
    <tr>
      <th>Stuff</th>
      <th>Stuff2</th>
    </tr>
  </thead>
  <tbody>
    {{for myArray}} <!-- Creates two rows per item in array -->
    <tr>
      <td>{{data}}</td>
      <td>{{data2}}</td>
    </tr>
    <tr class="special-row">
      <td>{{otherData}}</td>
      <td>{{otherData2}}</td>
    </tr>
    {{/for}}
  </tbody>
</table>

With AngularJs:

<table>
  <thead>
    <tr>
      <th>Stuff</th>
      <th>Stuff2</th>
    </tr>
  </thead>
  <tbody>
    <div ng-repeat="element in myArray"> <!-- This gets removed since it's not a valid element for a table body -->
      <tr>
        <td>{{element.data}}</td>
        <td>{{element.data2}}</td>
      </tr>
      <tr class="special-row">
        <td>{{element.otherData}}</td>
        <td>{{element.otherData2}}</td>
      </tr>
    </div>
  </tbody>
</table>

I cannot have a <div> inside of my table body to put the ng-repeat on. How can I do this?

Answer 1

You should do it like this

<table>
  <thead>
    <tr>
      <th>Stuff</th>
      <th>Stuff2</th>
    </tr>
  </thead>
  <tbody>
      <tr ng-repeat-start="element in myArray">
        <td>{{element.data}}</td>
        <td>{{element.data2}}</td>
      </tr>
      <tr ng-repeat-end class="special-row">
        <td>{{element.otherData}}</td>
        <td>{{element.otherData2}}</td>
      </tr>
  </tbody>