Question

我有一张桌子：

    <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>'; } ?>

但是如何使用带有角度数据的if语句并将其组合起来如果有1行信息我还想显示空行。

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);
  });
};

Answer 1

＆＃13;

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;
  }
})

＆＃13;

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

＆＃13;

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

＆＃13;

填充数据后填充空行的表

1 个答案: