search not working in angular data

Question

I want to format the date and then search from the input box. I am trying to use a converter but for some reason the search does not work and my filter isnt working either here is my fiddle example

https://jsfiddle.net/U3pVM/25662/

here is my code

<div ng-app='app'>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
  <form>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><i class="fa fa-search"></i></div>
          <input type="text" class="form-control"  ng-model="search">
        </div>
      </div>
    </form>

   <div ng-repeat="item in data">
     {{item.date }}
   </div>
  </div>
</div>

and here is my controller

var app = angular.module('app', []);
app.controller('TodoCtrl', function ($scope)  {

      $scope.data = [
  {
    name_object: "my Object",
    date: "2016-05-01 20:00:00",
    id: "123",
    name: "xy kaj Pl"
  },
  {
    name_object: "my Object2",
    date: "2014-15-01 20:10:00",
    id: "143",
    name: "Rose Jack"
  },
  {
    name_object: "my Object3",
    date: "2015-17-01 04:00:00",
    id: "143",
    name: "John Smith"
  },
  {
    name_object: "my Object4",
    date: "2016-18-01 04:00:00",
    id: "142",
    name: "Barbara Francis"
  }
]
});

$scope.dateFormat = function(string){
     return  isoDate(string);
    };
app.filter('isoDate', function(string){
   return new Date(string.split(' ').join('T'));
});

When I enter the date, it does not filter and also my custom filter is not working to formate date either.

Thanks

Answer 1

Search issue

As it is shown in example in filter angular docs you can use search filter as follows:

<div ng-repeat="item in data | filter:search:strict">
  {{item.date }}
</div>

See jsfiddle

Formating issue

Prepare filter as follows:

app.filter('isoDate', function() {
  return function(input) {
    return new Date(input.split(' ').join('T'));
  }}
);

Usage:

<div ng-repeat="item in data | filter:search:strict">
  {{item.date | isoDate | date : 'yyyy-MM-dd hh:mm:ss'}}
</div>

Filter used this way affects only way of displaying dates and not affects search, so if you will use date format different than yyyy-MM-dd hh:mm:ss i.e. MM/dd/y search will work in data format, filter will affect on disply way. There will be mismach. Search will work for i.e. 05-02 (05/02/2012 will be displayed). See jsfiddle. Use custom search filter to keep consistency between way of displaying and search date format.

Custom search filter

app.filter('searchFor', function($filter) {
    return function(arr, searchString) {
        if (!searchString) {
            return arr;
        }
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function(item) {
            var itemDateInFormat = $filter('date')(new Date(item.date.split(' ').join('T')), 'MM/dd/y');
            if (itemDateInFormat.indexOf(searchString) !== -1) {
                result.push(item);
            } else if (item.name.toLowerCase().indexOf(searchString) !== -1) {
                result.push(item);
            }
        });
        return result;
    };
});

HTML:

<tr ng-repeat="item in data | searchFor:search">
    <td> {{item.date | isoDate | date : 'MM/dd/y'}}</td>
    <td> {{item.name}}</td>
</tr>

See jsfiddle

Remember to:

• keep consistency between date format used in searchFor filter and date format used to display table.
• add else if to apply search for other data like added else if (item.name.toLowerCase().indexOf(searchString) !== -1) { result.push(item);} for item.name.