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

【问题标题】：angularJS - Repeating tr's in a table, but dynamically adding more rows while loopingangularJS - 在表中重复 tr，但在循环时动态添加更多行
【发布时间】：2013-07-18 17:19:58
【问题描述】：

由于示例总是能说明更多信息，因此我想用另一种语言在这里做的只是文字

<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 的第一个结束标记处。我在其他一些线程上读到这不是很容易做到的，但是怎么做呢？是的，我真的很想用一张桌子。这是我用 angularjs 设计的例子，它显然不能像我希望的那样工作。任何指示如何做到这一点？

JSBin example with tr-ng-repeat

【问题讨论】：

标签： angularjs angularjs-ng-repeat

【解决方案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>

根据表格的条目重复表格主体的次数，其中有两行 - 一行用于实际显示行条目，另一行用于有条件地显示。

【讨论】：

【解决方案2】：

目前(1.0.7/1.1.5)你不能在ng-repeat之外输出数据，但是版本 1.2（参见 youtube 视频 AngularJS 1.2 and Beyond 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 元素。

【讨论】：

确实如此，然后我将等待 1.2 这样做，直到那时使用 tbody 重复“解决方案”。谢谢你的信息

【解决方案3】：

你可以重复tbody

<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表达式包裹在{{}}中，你可以使用item.warning

【讨论】：