How to clear ng-table filtered data?

Question

I am using the ngTable directive to add awesome filtering to my table. My view has:

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

My controller has:

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

This seems to work great for filtering items as this

filters to

However, when I clear the filter, nothing changes. I want all of the rows to reappear, but they do not. Ideas?

Answer 1

I'm guessing it's because you constantly change the original array. That is, $scope.items first contains all items. Then you filter, and modify $scope.items by removing items that no longer match. When you clear the filter, $scope.items only contains the items that matched the last filter.

You start out by taking $scope.items and running a filter on it, and then assign that to orderedData. Then you assign $scope.items to orderedData which is why the size of $scope.items is just getting smaller and smaller.

Try changing it to:

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

And your ng-repeat to:

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

As ngTable seems to add a $data property on the scope with the filtered data.