Custom and standard multiple filters in AngularJS

Question

I have a angularJS list that I would like to implement several filters, one will be a custom filter.

<li ng-repeat="item in cumulus.items | orderBy: predicate:reverse 
               | filter:listSearch | filter:filteredDates"
    ng-show="cumulus.items.length > 0">
</li>

My filter listSearch is working properly and I already made a function for the filteredDates based in these two inputs and on button click:

<input type="date" ng-model="filter_startDate" />
<input type="date" ng-model="filter_endDate" />
<button id="search" ng-click="dateRange(filter_startDate,filter_endDate, cumulus.items)" >Search</button>

My function is returning the right items on the console, all I need is to update the list with the returned value. Here is the function:

$scope.dateRange = function (initialDateVal, endDateVal, cumulusItems) {
    filteredDates = [];
    var parsedinitialDateVal = Date.parse(initialDateVal);
    var parsedendDateVal = Date.parse(endDateVal);
    console.log("Initial date:", initialDateVal, parsedinitialDateVal);
    console.log("End date:", endDateVal, parsedendDateVal);
    if (cumulusItems && initialDateVal && endDateVal) {

        angular.forEach(cumulusItems, function (item) {

            parsedItemCreationDate = Date.parse(item.creationDate);

            if (parsedItemCreationDate >= parsedinitialDateVal
                && parsedItemCreationDate <= parsedendDateVal) {

                filteredDates.push(item);
            }                 

        });
    }

    console.log(filteredDates);
    return filteredDates;
};

You can assign it back to cumulus.items to update the list , but it will be filtered one, you can't have old data after assigning it to the original list variable. — saravana
– saravana, Commented Dec 4, 2019 at 15:02
@saravana It worked, is there a alternative? One that can work in a way I can correct the dates and update the value again? — CMartins
– CMartins, Commented Dec 4, 2019 at 15:25

georgeawg · Accepted Answer · 2019-12-04 16:54:13Z

1

One approach is to use a custom predicate function:

<li ng-repeat="item in cumulus.items | orderBy: predicate:reverse 
               | filter:listSearch | filter: predicateFn">
</li>

$scope.predicateFn = function(element) {
    var parsedinitialDateVal = $scope.filter_startDate.valueOf();
    var parsedendDateVal = $scope.filter_endDate.valueOf();
    console.log("Initial date:", initialDateVal, parsedinitialDateVal);
    console.log("End date:", endDateVal, parsedendDateVal);

    var parsedItemCreationDate = Date.parse(element.creationDate);

    if (parsedItemCreationDate >= parsedinitialDateVal
        && parsedItemCreationDate <= parsedendDateVal) {

        return true;
    } else {
        return false;
};

A predicate function can be used to write arbitrary filters. The function is called for each element of the array, with the element, its index, and the entire array itself as arguments.

The final result is an array of those elements that the predicate returned true for.

For more information, see

AngularJS filter Filter API Reference

edited Dec 4, 2019 at 16:54

answered Dec 4, 2019 at 16:48

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

1 Comment

CMartins Over a year ago

It worked with a minor adjustments. @georgeawg thanks

Collectives™ on Stack Overflow

Custom and standard multiple filters 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