如何使用ngrepeat，AngularJS注入空行列表-Howtoinjectemptyrowsoflistwithngrepeat,AngularJS

2  

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

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

  

    
{{row.name}}
  

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

在CSS的帮助下,您可以在三个部分之间添加一些可视空间:

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

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

You can see the result in this plunker

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

Pure angularJS with groupBy of angular.filter module

For this solution you need to wrap each block into a in order to use a nested ng-repeat. You might either style your 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.

对于此解决方案,您需要将每个块包装到中,以便使用嵌套的ng-repeat。您可以设置标签的样式以在其间留一些空格,或者添加一个空行,如下所示。您可以有条件地隐藏此行以删除表末尾的空行。

    {{key}}
    

  

      
{{row.name}}
    
    
 
  

This is the corresponding plunker.

这是相应的plunker。