表中不存在数据时无法显示 NO DATA 消息

Question

我在 angularjs 中使用 NgTableParams 显示表格数据。当数据不可用或长度为零时，我试图在表中显示 NO DATA EXISTS，但我的代码似乎不起作用。

演示：http://plnkr.co/edit/nEbjQE1NQW7VF8dlZvyy?p=preview

示例代码：

<table ng-table="tableParams" class="table" show-filter="true">
   <tbody ng-repeat="user in $data">
    <tr ng-show="$data.length > 0"> 
          <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
       {{user.name}}</td>
      <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
        {{user.age}}</td>
    </tr>
    <tr ng-show="$data.length === 0"> 
          <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
      NO DATA FOUND</td>
      <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
        </td>
    </tr>
   </tbody>

js代码：

app.controller('MainCtrl', function($scope, NgTableParams) {

  $scope.data1 = [];
console.log(" $scope.data1 length " +  $scope.data1.length);
$scope.tableParams = new NgTableParams({}, { dataset: $scope.data1});  
});

也尝试如下，但它没有显示表格标题和列的过滤器.. 演示：http://plnkr.co/edit/XAOO5tPALVOkQW9hhJCs?p=preview:

 <tbody ng-show="!$data.length">
      <tr> 
          <td>
             NO DATA FOUND
          </td>
      </tr>
   </tbody>

   <tbody ng-repeat="user in $data">
    <tr ng-show="$data.length > 0"> 
....
</tbody>

Answer 1

这里有两个问题

第一个是您的 ng-repeat 指令在您的 tbody 中，这将导致您的表格正文为数组中的每个元素呈现。

第二个是您的"NO DATA FOUND" 消息在您的ng-repeat 块内，如果$data 为空，则不会呈现任何元素。

解决方案是将ng-repeat 从您的tbody 移动到您要为数组中的每个项目重复的实际元素，在这种情况下，tr 包含要显示的数据。

<table ng-table="tableParams" class="table" show-filter="true">
  <tbody>
    <tr ng-repeat="user in $data" ng-show="$data.length > 0"> 
      <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
        {{user.name}}</td>
      <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
        {{user.age}}</td>
    </tr>
    <tr ng-show="$data.length === 0"> 
      <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
        NO DATA FOUND</td>
      <td title="'Age'" filter="{ age: 'number'}" sortable="'age'"></td>
    </tr>
  </tbody>
</table>

希望对你有帮助！