how filter Angularjs result by trimmed ng-model

Question

I have three input boxes to filter field "tradeDate"

<input type="text" placeholder="Date YYYY" ng-model="search.DateYear">

<input type="text" placeholder="Date MM" ng-model="search.DateMonth">

<input type="text" placeholder="Date DD" ng-model="search.DateDay">

The data is retrieved from SQL server, and date is like this

{"dayOfMonth":9,"dayOfWeek":"MONDAY","dayOfYear":130, "month":"MAY","monthValue":5,"year":2016,"hour":12,"minute":38,"nano":0,"second":57,"chronology":{"id":"ISO","calendarType":"iso8601"}

so when I want to filter with ng-repeat, it will be like:

<tr ng-repeat="trade in trades|filter:tradeDate.year:search.DateYear,
tradeDate.monthValue:search.DateMonth,tradeDate.dayOfMonth:search.DateDay">

<td>{{trade.blahhblahhField}}</td>
<td>{{trade.blahhblahhField}}</td>
<td>{{trade.tradeDate}}</td>
</tr>

But now I want to change it to one input box (ng-model:search.tradeDate), which has the format"YYYY-MM-DD". How do I filter this?

I tried this kind of approach:

    ng-repeat="trade in trades|filter:tradeDate.year:trimYear(search.tradeDate),
tradeDate.monthValue:trimMonth(search.tradeDate),tradeDate.dayOfMonth:trimDay(search.tradeDate)"

something like this and create 3 functions in js to trim (ex:2016-05-20)

year: substring to get 2016

    $scope.trimYear = function(input){
        var res = input.substring(0,4);
     return res;
  };

month: substring to get 5 (not 05 since month value from data will be 5)

day: substring to get 20

But this wouldn't work; I'm assuming its because when first loading it there's no input. I'm still new to this, is there any other way?

Lex Lex · Accepted Answer · 2016-06-15T20:46:48

You can easily accomplish this with a custom filter. Here is an example of how you might create the filter (I had to guess about some stuff so you may need to tweak this to get it just right for your situation). In the filter function input is the list of trades from your ng-repeat and search is the ng-model value from the input where you have ng-model="search".

.filter('customDateFilter', function() {
    return function(input, search) {
        var out = [];
        angular.forEach(input, function(item) {
            if(!search){
                out.push(item);
            } else {
                var year = parseInt(search.substring(0,4));
                var month = parseInt(search.substring(5,7));
                var day = parseInt(search.substring(8,10));
                if(item.tradeDate.year === year && item.tradeDate.monthValue === month && item.tradeDate.dayOfMonth === day){
                    out.push(item);
                }
            }
        });
        return out;
    }
})

This is very specific so it will only match when the full date has been entered and you'll need to validate that users are entering in YYYY-MM-DD format (or better yet, use a datepicker control). Now you can use this filter in your HTML:

<tr ng-repeat="trade in trades | customDateFilter: search">

With that bit of HTML markup you are passing the trades object (which is an array of trades) to the customDateFilter filter and passing the ng-model search to the filter function.

how filter Angularjs result by trimmed ng-model

1 Answers