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的第一个结束标记处.我已经读过其他一些线程,这不是很容易做到的,但它怎么做呢？是的,我确实想要使用一张桌子.这是我设计的angularjs的例子,它显然不能像我希望的那样工作.有什么指示可以做到这一点？

JSBin与tr-ng-repeat的例子

Answer 1

目前(1.0.7/1.1.5)你不能输出ng-repeat之外的数据,但是版本1.2(参见youtube video AngularJS 1.2和Beyond at 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元素.

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>

重复表体的次数与表的条目一样多,并且在其中有两行 - 一行实际显示行条目,另一行有条件显示.