使用ng-repeat在表格中打印空白行

时间:2016-12-08 10:58:49

标签: angularjs angularjs-ng-repeat html-table

<table>
 <tr ng-repeat="obj1 in jsondata">
     <td>{{$index+1}}</td>
     <td>{{obj1.Subject_ID}}</td>
     <td>{{obj1.Credit}}</td>
 </tr>
 /********print blank row like following depends on jsondata length*****************/  
 <tr ng-repeat="obj1 in jsondata.length">
  <td colspan="3">&nsbp;<td>   
 </tr>
/******************************/
</table>

假设 jsondata.length长度为7,然后打印3个空白行,否则如果jsondata.length长度为8,则如果jsondata.length长度为10则打印2个空白行或者更多,然后没有空白行

如何使用ng-repeat或以其他任何简单的方式执行此操作?

1 个答案:

答案 0 :(得分:1)

创建一个长度为10的临时数组。根据jsonData长度显示空白td

  <table>
    <tr ng-repeat="obj1 in jsondata">
      <td>{{$index+1}}</td>
      <td>{{obj1.Subject_ID}}</td>
      <td>{{obj1.Credit}}</td>
    </tr>
    <tr ng-if="(temp.length >= jsondata.length)" ng-repeat="key in temp | limitTo: (jsondata.length - temp.length) track by $index">
      <td colspan="3">blank
        </td>
    </tr>
  </table>

<强> DEMO