How to enter empty list lines using ngrepeat, AngularJS

Question

my code works, but I was wondering if there is a better way to enter empty rows in a table (for appearance only). This seems a little redundant, but cannot find the right example of how to do it better. my code is:

<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 have two different solutions for you:

CSS combined with orderBy

Perhaps you can use single ng-repeat to display all the lines 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> 

Using CSS, you can add some visible 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 of this plunker.

Pure angular JS with groupBy angular.filter module

For this solution, you need to wrap each block in <tbody> to use nested ng-repeat . You can either create <tbody> tags to leave some space between them, or add an empty line, 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 appropriate plunker .