2

我正在使用ngTable指令为我的表添加很棒的过滤。我的观点是：

  <table ng-table="tableParams" show-filter="true" class="table table-bordered table-hover table-condensed table-striped">
    <tr ng-repeat="item in items">
      <td class="text-center">
        <input type="checkbox" />
      </td>
      <td data-title="'SKU'" filter="{ 'sku': 'text' }" sortable="'sku'">
        <a href="/company/item/{{ item._id }}">{{ item.sku }}</a>
      </td>
      <td data-title="'Description'" filter="{ 'description': 'text' }">
        <a href="/company/item/{{ item._id }}">{{ item.description }}</a>
      </td>
      <td data-title="'Client'" filter="{ 'client.name': 'select' }">
        {{ item.client.name }}
      </td>
      <td data-title="'Active'" filter="{ 'active': 'select' }" class="text-center">
        {{ item.active }}
      </td>
      <td>
        DEACTIVE / EDIT
      </td>
    </tr>
  </table>

我的控制器有：

$scope.tableParams = new ngTableParams({
  page: 1,            // show first page
  count: 10,           // count per page
}, {
  total: $scope.items.length, // length of data
  getData: function($defer, params) {
    var orderedData = params.sorting() ?
      $filter('orderBy')($scope.items, params.orderBy()) : $scope.items;

    orderedData = params.filter() ?
      $filter('filter')(orderedData, params.filter()) : orderedData;

    $scope.items = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

    params.total(orderedData.length); // set total for recalc pagination
    $defer.resolve($scope.items);
  }
});

这似乎非常适合过滤项目，因为 在此处输入图像描述

过滤到 在此处输入图像描述

但是，当我清除过滤器时，没有任何变化。我希望所有的行都重新出现，但他们没有。想法？

4

1 回答 1

1

我猜这是因为您不断更改原始数组。也就是说，$scope.items 首先包含所有项目。然后通过删除不再匹配的项目来过滤和修改 $scope.items。当您清除过滤器时，$scope.items 仅包含与最后一个过滤器匹配的项目。

您首先获取 $scope.items 并在其上运行过滤器，然后将其分配给 orderedData。然后将 $scope.items 分配给 orderedData 这就是 $scope.items 的大小越来越小的原因。

尝试将其更改为：

$scope.tableParams = new ngTableParams({
  page: 1,            // show first page
  count: 10,           // count per page
}, {
  total: $scope.items.length, // length of data
  getData: function($defer, params) {
    var orderedData = params.sorting() ?
      $filter('orderBy')($scope.items, params.orderBy()) : $scope.items;

    orderedData = params.filter() ?
      $filter('filter')(orderedData, params.filter()) : orderedData;

    orderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

    params.total(orderedData.length); // set total for recalc pagination
    $defer.resolve(orderedData);
  }
});

你ng-repeat要：

<tr ng-repeat="item in $data">

由于 ngTable 似乎在过滤数据的范围内添加了 $data 属性。

于 2014-03-13T13:54:12.257 回答