如何在表体中使用ng-repeat来包含多行？

Question

我正试图从jsRender转换到AngularJs,似乎无法弄清楚如何生成多个表行ng-repeat.

我需要为每个ng-repeat生成两个表行,这些行彼此相关.第二行实际上是一个隐藏的行,像手风琴一样展开.这与renderJs完美配合:

使用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>

使用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>

我不能把<div>我的桌子内部放在ng-repeat上面.我怎样才能做到这一点？

Answer 1

你应该这样做

<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>