AngularJS中的自定义和标准多重过滤器

Question

我有一个angularJS列表，我想实现几个过滤器，其中一个将是自定义过滤器。

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

我的过滤器listSearch工作正常，我已经根据这两个输入和按钮单击为filteredDates创建了一个函数：

<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>

我的函数是在控制台上返回正确的项，我所需要的只是用返回的值更新列表。以下是功能：

$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;
};

Answer 1

一种方法是使用自定义谓词函数：

<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;
};

谓词函数可用于编写任意筛选器。该函数针对数组的每个元素调用，元素、其索引和整个数组本身作为参数。

最后的结果是谓词返回true的元素数组。

有关详细信息，请参阅

• AngularJS filter Filter API Reference