panagulis72 panagulis72 - 2 days ago 5
AngularJS Question

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>

Answer

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, filterObj);

  // Then we return the final data array (orderedData)
  $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
Comments