How to search filter date objects with ngTable in AngularJS

Question

I have a table similar to this:

<table ng-table="tableParams" show-filter="true" class="table">
  <tr ng-repeat="user in $data">
    <td data-title="'Name'" filter="{'userName':'text'}" sortable="'userName'">{{user.userName}}</td>
    <td data-title="'Created'" filter="{'userCreated':'text'}" sortable="'userCreated'">{{user.userCreated | date:'dd MMM yyyy'}}</td>
  </tr>
</table>

Using ngTable and Angular, this produces a table based on the data I put provide. It allows the user to search each column using a text input. However the search filter does not work on the Created column because it is a javascript date object (that has been filtered to display in a different format). How can I make search filtering work for dates?

My ngTable function looks like this:

function userTable(){

  var data = $scope.userList;

  //init ng-table with data
  $scope.tableParams = new ngTableParams({
    page: 1,
    count: 10
  }, {

    //data length and filters
    total: data.length,
    getData: function($defer, params) {

      //search filter
      var filteredData = params.filter() ?
          $filter('filter')(data, params.filter()) :
          data;

      //order filter
      var orderedData = params.sorting() ?
          $filter('orderBy')(filteredData, params.orderBy()) :
          data;

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

  });
}

Then I just call usertable(someData);

M.javid · Accepted Answer · 2015-08-18 11:37:21Z

1

The quickest thing to do is to add another field into your (view) model that would keep formatted date.

so your model would look like :

{ Name: '', Created: '', CreatedFormatted: ''}

another apporach ... create custom comparator that would be used in filter :

$filter('filter')(array, expression, comparator)

params.filter() returns object like {Created: "Mon 12,"}

inside the comparator format date for each record and compare strings ...

edited Aug 18, 2015 at 11:37

M.javid

6,6344 gold badges44 silver badges58 bronze badges

answered Oct 9, 2014 at 15:11

marcinn

1,78611 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CaribouCode Over a year ago

Ah yes option 1 was fairly simple. Thanks.

Collectives™ on Stack Overflow

How to search filter date objects with ngTable in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related