如何在 table 正文中使用 ng-repeat 来包含多行？

Question

我正在尝试从 jsRender 过渡到 AngularJs，但似乎无法弄清楚如何使用 ng-repeat.

生成多个 table 行

我需要为每个 ng-repeat 生成两 table 行，这些行彼此相关。第二行实际上是一个像手风琴一样展开的隐藏行。这与 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>

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

Answer 2

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>

如何在 table 正文中使用 ng-repeat 来包含多行？

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

html

javascript

jsrender

angularjs