如何使用ngrepeat，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>

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

您可以在this plunker

中查看结果

具有groupBy模块<{h}>的<tbody>的纯angularJS

对于此解决方案，您需要将每个块包装到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> 标记的样式以在其间留一些空格，也可以添加一个空行，如下所示。您可以有条件地隐藏此行以删除表末尾的空行。

{{1}}

这是angular.filter。