如何使用NG-不重复的HTML元素 [英] How to use ng-repeat without an html element

问题描述

我需要使用 NG-重复（在AngularJS）列出所有元素的数组。

的复杂性在于，阵列中的每个元素将变换到一个表中的任何一个，两个或三个行。

我无法创建有效的HTML，如果 NG-重复的元素上使用，因为没有任何类型的重复元素被允许℃之间TBODY＆GT ; 和＆LT; TR方式＆gt;

例如，如果我用NG重复上＆LT;跨度＆GT; ，我会得到：

 ＆LT;表＆gt;
  ＆LT;＆TBODY GT;
    ＆LT;跨度＆GT;
      ＆LT; TR＆GT; ...＆LT; / TR＆GT;
    ＆LT; / SPAN＆GT;
    ＆LT;跨度＆GT;
      ＆LT; TR＆GT; ...＆LT; / TR＆GT;
      ＆LT; TR＆GT; ...＆LT; / TR＆GT;
      ＆LT; TR＆GT; ...＆LT; / TR＆GT;
    ＆LT; / SPAN＆GT;
    ＆LT;跨度＆GT;
      ＆LT; TR＆GT; ...＆LT; / TR＆GT;
      ＆LT; TR＆GT; ...＆LT; / TR＆GT;
    ＆LT; / SPAN＆GT;
  ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

这是无效的HTML。

但我需要生成的是：

 ＆LT;表＆gt;
  ＆LT;＆TBODY GT;
    ＆LT; TR＆GT; ...＆LT; / TR＆GT;
    ＆LT; TR＆GT; ...＆LT; / TR＆GT;
    ＆LT; TR＆GT; ...＆LT; / TR＆GT;
    ＆LT; TR＆GT; ...＆LT; / TR＆GT;
    ＆LT; TR＆GT; ...＆LT; / TR＆GT;
    ＆LT; TR＆GT; ...＆LT; / TR＆GT;
  ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

其中第一行已经由第一阵列元件产生，接下来的三个由第二和由最后数组元素中的第五和第六

我怎么可以用NG-重复这样的方式的HTML元素，它必将在渲染过程中消失？

或者有另一种解决方案呢？

---

澄清：生成的结构应如下。每个阵列元素可以1-3行表中的之间产生。答案应该理想支持每个数组元素0-n行。

 ＆LT;表＆gt;
  ＆LT;＆TBODY GT;
    ＆LT;！ - 数组元素0  - ＆GT;
    ＆所述; TR＆GT;
      ＆LT; TD＆GT;一行项目＆lt; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT;！ - 数组元素1  - ＆GT;
    ＆所述; TR＆GT;
      ＆LT; TD＆GT;三排项目＆lt; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
      ＆LT; TD＆GT;有的产品详细信息及LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
      ＆LT; TD＆GT;客户评级和LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT;！ - 数组元素2  - ＆GT;
    ＆所述; TR＆GT;
      ＆LT; TD＆GT;二排项目＆lt; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
      ＆LT; TD＆GT;全面描述＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

解决方案

更新：如果您使用的是1.2+角，使用的 NG-重复启动。见@ jmagnusson的答案。

否则，怎么样把NG重复上TBODY？ （据我所知，它是好的，有多个＆LT; TBODY> S IN单个表）

 ＆LT; TBODY NG重复=行阵＆GT;
  ＆LT; TR NG重复=项行＆GT;
     ＆LT; TD＆GT; {{}项}＆LT; / TD＆GT;
  ＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
 

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.

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

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>          

Which is invalid html.

But what I need to be generated is:

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

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?

---

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>          

解决方案

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

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>

这篇关于如何使用NG-不重复的HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！