关于angularJS：angularJS – 在表中重复tr，但在循环时动态添加更多行


angularJS - Repeating tr's in a table, but dynamically adding more rows while looping

既然例子总是能说明更多，那么这里的单词就是我想用另一种语言做的事情。

1
2
3
4
5
6
7
8
9
<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>

因此，这将循环一组项，并显示这些项的一些属性。如果有警告，将在显示警告的当前行下面添加一个新行。但是，在安古拉吉斯，我该怎么做呢？如果我在tr上放一个ng repeat，它将在tr的第一个结束标记处停止。我在一些其他线程上读到这不是很容易做到的，但是如何做到呢？是的，我真的很想用桌子。这是我用安古拉吉斯设计的例子，它显然没有像我希望的那样工作。有什么建议可以这样做吗？

带有tr ng repeat的jsbin示例

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

1
2
3
4
5
6
7
8
<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>

其思想是，无论什么在开始和结束之间，都将被重复，包括结束元素。

相关讨论

我能想到的一个解决方案是在同一个表中有多个tbody标记。这里讨论在同一个表中使用多个tbody标记。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

重复表体的次数与表的条目相同，其中有两行-一行用于实际显示行条目，另一行用于有条件地显示。

相关讨论

你可以在tbody上重复

1
2
3
4
5
6
7
8
9
10
<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即可。