Autolycus Autolycus - 5 months ago 26
AngularJS Question

search not working in angular data

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

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.