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重复，它将在tr的第一个结束标记处停止。我在其他一些线程上读到这不是很容易做到的，但是如何做到呢？是的，我真的很想使用一个表。这是我用angularjs制作的示例，显然没有按照我希望的那样工作。有什么建议可以做到吗？

带有tr-ng-重复的JSBin示例

Answer 1

您可以在车身上重复

<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">Warning !!!</td>
  </tr>
</tbody>

此外，您不需要将ng show表达式包装在{}中，您只需使用项即可。警告

Answer 2

我能想到的一种解决方案是在同一个表中有多个tbody标签。这里讨论了在同一个表中使用多个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>

如果表格中有条目，请重复多次表体，其中有两行—一行实际显示行条目，另一行有条件显示。

Answer 3

目前（1.0.7/1.1.5）您无法在ng repeat之外输出数据，但1.2版（请参阅youtube视频AngularJS 1.2及17:30以后的版本）将引入以下语法（根据您的示例进行调整）：

<tr ng-repeat-start="item in items">
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
<tr ng-repeat-end ng-show="item.showWarning">
  <td colspan="3">{{item.warning}}</td>
</tr>

这个想法是，在-start和-end之间的任何内容都将重复，包括-end元素。