我有一个 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;
};
最佳答案
一种方法是使用自定义谓词函数:
<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 的元素组成的数组。
欲了解更多信息，请参阅
关于javascript - AngularJS 中的自定义和标准多个过滤器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59178843/