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>

希望有帮助！

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

1 个答案: