填充数据后用空行填充表格答案

【问题标题】：Fill table with empty rows after data is filled填充数据后用空行填充表格
【发布时间】：2018-03-01 18:58:11
【问题描述】：

我有一张桌子：

    <table class="woohoo unity-hs">           
      <thead>
        <tr>
          <th>House</th>
          <th>Event</th>
          <th>Unitz</th>
          <th>Date</th>
        </tr>
      </thead>  
      <tbody> 
        <tr ng-repeat="item in houseList">
          <td> {{item.hname}} </td>
          <td> {{item.event}} </td>
          <td> {{item.points}} </td>
          <td> {{item.date}} </td>
        </tr>
      </tbody>
    </table>

即使根本没有数据，我如何用 10 个空行填充我的表。或者，如果我只想显示一行信息，则显示 1 行信息和 9 行空行。我需要使用 Angular 还是 php？我尝试插入php代码：

<?php for($i=0; $i<10; $i++){ echo '<tr class="projtitletr"><td colspan="4"></td></tr>'; } ?>

但是，如果有 1 行的信息，我如何将 if else 语句与角度数据结合使用，我仍然想显示空行。

JS部分：

$scope.historyHouseInit = function(fkhouseid) {
  $scope.fkhouseid = fkhouseid;
  $http({
    method: 'post',
    url: 'House/house_list.php',
    data: {fkhouseid:$scope.fkhouseid}
  }).then(function successCallback(response) {
    $scope.houseList = response.data;
    console.log(response);
  });
};

【问题讨论】：

您可以在 houseList 集合的开头插入 10 个空白行，ng-repeat 将负责将它们呈现在视图中
@PankajParkar 如何将 10 个空白行添加到 houseList 集合中？请参阅编辑我添加了我的 js 部分

标签： php angularjs

【解决方案1】：

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.houseList = [
    { hname: 'First' },
    { hname: 'Second' }
  ];
  $scope.limit = 10;
  $scope.remains = function() {
    var stubs = [];
    for (var i = 0; i < $scope.limit - $scope.houseList.length; i++)
      stubs.push(i);    
    return stubs;
  }
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  Minimum rows count: <input type='text' ng-model='limit' />
  <br>
  <br>
  <table>
    <thead>
      <tr>
        <th>House</th>
        <th>Event</th>
        <th>Unitz</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in houseList">
        <td>{{item.hname}}</td>
        <td>{{item.event}}</td>
        <td>{{item.points}}</td>
        <td>{{item.date}}</td>
      </tr>
      <tr ng-repeat="stub in remains()">
        <td ng-repeat='x in [0,1,2,3]'>&nbsp</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：