angularjsangular-filtersngtable

How to filter in ngTable


With Angular, I'm doing http request to take data. I've added ngTable and using it to display data. They correctly display in the table but I can't filters, sorting and delete them. Why?

js:

      $scope.cancel = cancel;

function cancel(row, rowForm) {
  var originalRow = resetRow(row, rowForm);
  angular.extend(row, originalRow);
}

$scope.tableParams.reload().then(function(data) {
  if (data.length === 0 && $scope.tableParams.total() > 0) {
    $scope.tableParams.page($scope.tableParams.page() - 1);
    $scope.tableParams.reload();
  }
});

  $http.get('my_url')
.success(function(data, status) {
  $scope.data = data;

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

      $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
  });
});

html:

    <table ng-table="tableParams" show-filter="true" class="table table-bordered table-striped">
  <tr ng-repeat="row in data track by row.id">
    <td title="'Id'" filter="{id: 'text'}" sortable="'id'">{{row.id}}</td>
    <td title="'Company'" filter="{company: 'text'}" sortable="'company'">{{row.company}}</td>
    <td title="'Email'" filter="{email: 'text'}" sortable="'email'">{{row.email}}</td>
    <td title="'Note'" filter="{note: 'text'}" sortable="'note'">{{row.note}}</td>
    <td>
      <button class="btn btn-default btn-sm" ng-click="cancel(row, rowForm)"><span class="glyphicon glyphicon-remove"></span></button>
    </td>
  </tr>
</table>

Solution

  • You are not applying any filters inside getData method.

    First, you need to filter the data, then you sort:

    getData: function($defer, params) {
      // I will use a copy of the data to always start with the original data 
      // array ($scope.data). If you are getting the data with $resource or $http
      // you can replace the $scope.data with the data obtained (eg.: response.data)
      var theData = angular.copy($scope.data);
    
      // First we filter using the filter object provided by the
      // method 'filter()' of ngTableParams instance.
      var filterObj = params.filter(),
          filteredData = $filter('filter')($scope.data, filterObj);
    
      // Then we sort the FILTERED DATA ARRAY
      // NOTICE that the first parameter provided to $filter('orderBy')
      // is the filtered array <filteredData> and not the original
      // data array.
      var sortObj = params.sorting(),
          orderedData = $filter('orderBy')(filteredData, sortObj);
    
      // Then we return the final data array (orderedData)
      $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }