我需要使用ng-repeat
(在 AngularJS 中)列出数组中的所有元素。
复杂之处在于数组的每个元素都将转换为表的一行、两行或三行。
我无法创建有效的 html,如果ng-repeat
用于元素,因为之间不允许有任何类型的重复元素<tbody>
and <tr>
.
例如,如果我使用 ng-repeat<span>
,我会得到:
<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>