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

我需要使用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>

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...