Как я могу использовать ng-repeat в теле таблицы, чтобы охватить несколько строк?

Я пытаюсь перейти от jsRender к AngularJs и не могу понять, как создать несколько строк таблицы с ng-repeat,

Мне нужно сгенерировать две строки таблицы за ng-повтор, эти строки связаны друг с другом. Второй ряд - фактически скрытый ряд, который расширяется как аккордеон. Это прекрасно работает с 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 на. Как я могу это сделать?

Источник

2 ответа

Решение

Вы должны сделать это так

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

Источник

https://jsfiddle.net/feq6pe7m/1/

<body ng-app="SampleApp">
  <table ng-controller="fcController" border="1px">
    <thead>
      <tr>
        <th>Stuff</th>
        <th>Stuff2</th>
      </tr>
    </thead>
    <tbody ng-repeat="element  in myArray">
      <tr>
        <td>{{element .Data1}}</td>
        <td>{{element .Data2}}</td>
      </tr>
      <tr class="special-row">
        <td>{{element.OtherData1}}</td>
        <td>{{element.OtherData2}}</td>
      </tr>
    </tbody>
  </table>
</body>
Источник
Другие вопросы по тегам