angularjs - 如何在没有 html 元素的情况下使用 ng-repeat

Question

我需要使用ng-repeat (在 AngularJS 中)列出数组中的所有元素。

复杂之处在于数组的每个元素都将转换为表格的一行、两行或三行。

我无法创建有效的 html，如果 ng-repeat用于元素，因为 <tbody> 之间不允许有任何类型的重复元素和<tr> .

例如，如果我在 <span> 上使用 ng-repeat ，我会得到:

<table>
  <tbody>
    <span>
      <tr>...</tr>
    </span>
    <span>
      <tr>...</tr>
      <tr>...</tr>
      <tr>...</tr>
    </span>
    <span>
      <tr>...</tr>
      <tr>...</tr>
    </span>
  </tbody>
</table>          

这是无效的 html。

但是我需要生成的是:

<table>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>          

其中第一行由第一个数组元素生成，接下来的三行由第二个数组元素生成，第五行和第六行由最后一个数组元素生成。

如何使用 ng-repeat 使其绑定(bind)的 html 元素在渲染过程中“消失”？

或者还有其他解决方案吗？

<小时/>

澄清:生成的结构应如下所示。每个数组元素可以生成 1-3 行表格。理想情况下，答案应该支持每个数组元素 0-n 行。

<table>
  <tbody>
    <!-- array element 0 -->
    <tr>
      <td>One row item</td>
    </tr>
    <!-- array element 1 -->
    <tr>
      <td>Three row item</td>
    </tr>
    <tr>
      <td>Some product details</td>
    </tr>
    <tr>
      <td>Customer ratings</td>
    </tr>
    <!-- array element 2 -->
    <tr>
      <td>Two row item</td>
    </tr>
    <tr>
      <td>Full description</td>
    </tr>
  </tbody>
</table>          

Answer 1

从 AngularJS 1.2 开始，有一个名为 ng-repeat-start 的指令可以完全满足您的要求。看我的回答in this question了解如何使用它的说明。