panagulis72 panagulis72 - 1 year ago 132
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?


$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 && $ > 0) {
$$ - 1);

.success(function(data, status) {
$ = data;

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

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


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

Answer Source

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 ($ If you are getting the data with $resource or $http
  // you can replace the $ with the data obtained (eg.:
  var theData = angular.copy($;

  // First we filter using the filter object provided by the
  // method 'filter()' of ngTableParams instance.
  var filterObj = params.filter(),
      filteredData = $filter('filter')($, 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(( - 1) * params.count(), * params.count()));
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download