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