angularjs - 如何使用ng repeat，AngularJS注入(inject)列表的空行

我的代码正在运行，但是我想知道是否有更好的方法将空行注入(inject)表中(仅用于外观)。
似乎有点多余，但是找不到正确的示例如何做得更好。
我现在的代码:

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

最佳答案

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

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中看到结果

带有angular.filter模块的groupBy的纯angularJS

对于此解决方案，您需要将每个块包装到<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>

这是the corresponding plunker。

关于angularjs - 如何使用ng repeat，AngularJS注入(inject)列表的空行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32156552/