如何使用ngrepeat、AngularJS注入列表的空行

我的代码正在运行，但我想知道是否有更好的方法将空行注入表中（只是为了外观）。 这似乎有点多余，但找不到正确的例子如何做得更好。 我现在的代码：

<tr class="{{row.class}}" ng-repeat="row in someList | filter:{class:'special'}">
  <td>{{row.name}}</td>
</tr>
<!-- empty row -->
<tr>
  <td>&nbsp;</td>
</tr>
<tr class="{{row.class}}" ng-repeat="row in someList | filter:{class:'other'}">
  <td>{{row.name}}</td>
</tr>
<!-- empty row -->
<tr>
  <td>&nbsp;</td>
</tr>
<tr class="{{row.class}}" ng-repeat="row in someList | filter:{class:'final'}">
  <td>{{row.name}}</td>
</tr>

{{row.name}
{{row.name}
{{row.name}

我为您提供了两种不同的解决方案：

CSS与订购方结合使用 您可以使用单个

ng repeat

以

orderBy:'class'

的正确顺序显示所有行：

<table>
  <tr class="{{row.class}}" ng-repeat="row in someList | orderBy:!'class'">
    <td>{{row.name}}</td>
  </tr>
</table>

您可以在中看到结果

纯angularJS，带有模块的

groupBy

对于此解决方案，您需要将每个块包装成一个

，以便使用嵌套的

ng repeat

。您可以设置

标记的样式，以便在标记之间留出一些空间，或者添加一个空行，如下所示。您可以有条件地隐藏此行，以消除表末尾的空行

<table>
  <tbody ng-repeat="(key, value) in someList | groupBy:'class'">
    {{key}}
    <tr class="{{key}}" ng-repeat="row in value">
      <td>{{row.name}}</td>
    </tr>
    <tr ng-if="key != 'final'"><td>&nbsp;</td></tr>
  </tbody>
</table>

{{key}}
{{row.name}

---

这是。

你的方法还可以。除非创建三个单独的表，否则无法避免此操作。可以使用

groupBy

，但需要重复

t正文

或

表

。您应该为此使用指令stuff@MohanSingh

ng repeat

是一个指令。。。那么您建议的指令会有什么不同呢？请给我一点时间，我可以为您创建一个指令。您也可以使用

$last

from

ng repeat

检查它是否是最后一个条目

<table>
  <tbody ng-repeat="(key, value) in someList | groupBy:'class'">
    {{key}}
    <tr class="{{key}}" ng-repeat="row in value">
      <td>{{row.name}}</td>
    </tr>
    <tr ng-if="key != 'final'"><td>&nbsp;</td></tr>
  </tbody>
</table>