How to inject empty rows of list with ngrepeat, AngularJS

Question

my code is working, but I was wondering if there is a better way of injecting empty rows into a table (just for look and feel). It seems a bit redundant, but cannot find the right example how to do it better. my code for now:

<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

I got two different solutions for you:

CSS combined with orderBy

You might might use a single ng-repeat to display all rows in the correct order with orderBy:'class':

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

With the help of CSS you may then add some visiual space between the three sections:

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

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

You can see the result in this plunker

Pure angularJS with groupBy of angular.filter module

For this solution you need to wrap each block into a <tbody> in order to use a nested ng-repeat. You might either style your <tbody> tags to leave some space inbetween or add an empty row as shown below. You can hide this row conditionally to get rid of the empty row at the end of the table.

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

This is the corresponding plunker.