angularJS - 在表中重复 tr，但在循环时动态添加更多行

Question

因为例子总是能说明更多，那么这里的文字就是我想用另一种语言做的

<tr>
    <c:forEach items="${items}" var="item"> 
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <c:if test="${item.showWarning}">
         </tr><tr><td colspan="3">${item.warning}</td>
      </c:if>
</tr>

所以这将遍历一组项目并显示这些项目的一些属性。如果有警告，则会在显示警告的当前行下方添加新行。但是，我如何在 angularJs 中做到这一点？如果我在 tr 上放一个 ng-repeat，它将停在 tr 的第一个结束标记处。我在其他一些线程上读到这不是很容易完成，但是怎么做呢？是的，我真的很想用一张 table 。这是我人为的 angularjs 示例，它显然不能像我希望的那样工作。任何指示如何做到这一点？

JSBin example with tr-ng-repeat

Answer 1

我能想到的一种解决方案是拥有多个 tbody同一个表中的标签。 Here是讨论使用多个tbody同一个表中的标签。

因此，对于您的问题，您可以进行以下设置:

<table ng-controller="ItemController">
    <thead>
        <th>Name</th>
        <th>Description</th>
        <th>warning?</th>
    </thead>
    <tbody ng-repeat="item in items">
        <tr>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
            <td>{{item.warning}}</td>
        </tr>
        <tr ng-show="item.warning">
            <td colspan="3" style="text-align: center">Warning !!!</td>
        </tr>
    </tbody>
</table>

重复表体与表的条目一样多次，其中有两行 - 一行实际显示行条目，另一行有条件地显示。