10

由于示例总是能说明更多信息，因此我想用另一种语言来做这件事

<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 设计的例子，它显然不能像我希望的那样工作。任何指示如何做到这一点？

带有 tr-ng-repeat 的 JSBin 示例

4

3 回答 3

20

目前（1.0.7/1.1.5）您无法在 ng-repeat 之外输出数据，但1.2版（请参阅17:30 的youtube 视频AngularJS 1.2 及更高版本）将带来以下语法（适用于您的示例）：

<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元素。

于 2013-07-19T12:37:56.573 回答
12

我能想到的一种解决方案是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>

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

于 2013-07-19T12:32:54.297 回答
0

你可以重复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

于 2013-07-19T12:28:35.117 回答