如何在没有 html 元素的情况下使用 ng-repeat [英] How to use ng-repeat without an html element

问题描述

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

I need to use ng-repeat (in AngularJS) to list all of the elements in an array.

复杂的是数组的每个元素都将转换为表格的一、两或三行.

The complication is that each element of the array will transform to either one, two or three rows of a table.

如果在元素上使用了 ng-repeat，我将无法创建有效的 html，因为 和 之间不允许有任何类型的重复元素.

I cannot create valid html, if ng-repeat is used on an element, as no type of repeating element is allowed between <tbody> and <tr>.

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

For example, if I used ng-repeat on <span>, I would get:

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

哪个是无效的 html.

Which is invalid html.

但我需要生成的是:

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

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

where the first row has been generated by the first array element, the next three by the second and the fifth and sixth by the last array element.

如何使用 ng-repeat 使其绑定的 html 元素在渲染过程中消失"?

How can I use ng-repeat in such a way that the html element to which it is bound 'disappears' during rendering?

或者有其他解决方案吗?

Or is there another solution to this?

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

Clarification: The generated structure should look like below. Each array element can generate between 1-3 rows of the table. The answer should ideally support 0-n rows per array element.

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

推荐答案

更新:如果您使用的是 Angular 1.2+，请使用 ng-repeat-start.请参阅@jmagnusson 的回答.

Update: If you are using Angular 1.2+, use ng-repeat-start. See @jmagnusson's answer.

否则，将 ng-repeat 放在 tbody 上如何?(AFAIK，在一个表中有多个 是可以的.)

Otherwise, how about putting the ng-repeat on tbody? (AFAIK, it is okay to have multiple <tbody>s in a single table.)

<tbody ng-repeat="row in array">
  <tr ng-repeat="item in row">
     <td>{{item}}</td>
  </tr>
</tbody>

这篇关于如何在没有 html 元素的情况下使用 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！