angularjs – 如何使用ng-repeat没有html元素

发布时间：2020-12-17 09:13:54 所属栏目：安全来源：网络整理

导读：我需要使用ng-repeat(在AngularJS中)列出数组中的所有元素。复杂性是，数组的每个元素都将转换为表的一行，两行或三行。如果在元素上使用ng-repeat，则无法创建有效的html，因为在 tbody之间不允许使用任何类型的重复元素。和 trgt ;. 例如，如果我在 span

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

复杂性是，数组的每个元素都将转换为表的一行，两行或三行。

如果在元素上使用ng-repeat，则无法创建有效的html，因为在< tbody>之间不允许使用任何类型的重复元素。和< tr&gt ;. 例如，如果我在< 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这样的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>

更新：如果你使用Angular 1.2，使用 ng-repeat-start.参见@ jmagnusson的答案。

否则，如何将ng-repeat放在tbody上？ (AFAIK，可以在单个表中具有多个< tbody>)。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!