如何使用ng-repeat在列表中插入空行，AngularJS

Question

我的代码可以工作，但是我想知道是否有更好的方法来向表格中注入空行（仅用于外观效果）。这似乎有些冗余，但我找不到更好的示例来改进它。

<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>

- Mafti

---

你的方法还可以。除非你创建三个单独的表，否则无法避免这种情况。 - dfsq

可以使用 groupBy，但需要重复使用 tbody 或 table。 - charlietfl

你应该使用一个指令来处理这个东西。 - Mohan Singh

@MohanSingh ng-repeat 是一个指令...那么您建议的指令会有什么不同？ - charlietfl

给我一点时间，我可以为您创建一个指令。 - Mohan Singh

@Mafti 我的回答解决了你的问题吗？也许我们可以进一步改进它，以达到更好的解决方案... - Daniel

Answer 1

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

使用CSS结合orderBy

您可以使用单个ng-repeat来按正确顺序显示所有行，使用orderBy:'class'：

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

使用CSS，您可以在三个部分之间添加一些视觉空间：

.other td,  .final td{
  padding-top:1em;
}

.other ~ .other td, .final ~ .final td{
  padding-top:0px;   
}

你可以在这个plunker中看到结果。

使用angular.filter模块的纯AngularJS和groupBy

对于这个解决方案，您需要将每个块包装成一个<tbody>，以便使用嵌套的ng-repeat。您可以样式化您的<tbody>标记，留下一些空间，或者像下面所示添加一个空行。您可以有条件地隐藏此行，以摆脱表格末尾的空行。

<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>

这是对应的 Plunker。

- Daniel

---

你可以使用 ng-repeat 中的 $last 来检查是否为最后一个条目。 - Aides