两个日期之间的自定义过滤器 AngularJS

Custom filter between two dates AngularJS

本文关键字：自定义 过滤器 AngularJS 之间 日期 两个      更新时间：2023-09-26

我正在尝试实现一个自定义过滤器，该过滤器返回在两个日期范围之间具有"completed_date"的项目。

但是，我发现我需要访问过滤器中的$scope才能从日期选择器中获取"选择"的两个日期。

我认为我不能使用 ng-change 函数，因为我有多个其他过滤器，因此需要确保它们都协同工作。

<select ng-model="userSelect" ng-options="user.id as user.name in usersObj"></select>
<select ng-model="departmentSelect" ng-options="department.id as department.name in deptObj"></select>
<div ng-repeat="post in postsList | dateRange | filter: {user_id: userSelect || undefined}: true | filter: {department_id: departmentSelect || undefined}: true">...</div>

两个日期选择器如下所示：

<input type="date" ng-model="to_date">
<input type="date" ng-model="from_date">

还有我的控制器中的过滤器;

.filter('dateRange', function() {
        return function( items ) {
            var filtered = [];
            var from_date = Date.parse($scope.from_date);
            var to_date = Date.parse($scope.to_date);
            angular.forEach(items, function(item) {
                if(item.completed_date > from_date && item.completed_date < to_date) {
                    filtered.push(item);
                }
            });
            return filtered;
        };
    });

但是，我现在意识到我无法访问过滤器中的$scope，这让我认为有更好的方法可以做到这一点。

提前谢谢。

以及我可以分析你的问题。自定义筛选器中不需要$scope。这就是为什么它是一个自定义过滤器，可以随心所欲地做任何事情。:)

您只需要将带有过滤器的模型作为参数传递，例如

.filter('dateRange', function() {
        return function( items, fromDate, toDate ) {
            var filtered = [];
            //here you will have your desired input
            console.log(fromDate, toDate);
            var from_date = Date.parse(fromDate);
            var to_date = Date.parse(toDate);
            angular.forEach(items, function(item) {
                if(item.completed_date > from_date && item.completed_date < to_date) {
                    filtered.push(item);
                }
            });
            return filtered;
        };
    });

然后像这样在你的HTML中使用它。

<div ng-repeat="post in postsList | dateRange : from_date : to_date | filter: {user_id: userSelect || undefined}: true | filter: {department_id: departmentSelect || undefined}: true">...</div>

希望对您有所帮助。

每次应用新过滤器时，您都会告诉 AngularJS 引擎运行$digest这会导致性能不佳。

为了提高您的性能并解决您的问题，我建议在控制器中使用您的过滤器，这将使您的 HTML 更具可读性并可能解决您的问题。

编辑：

上面你已经将过滤器注册到你的角度应用程序，而不是控制器本身。您可以在控制器中使用 $filter 对象，如下所示：

myApp.filter('dateRange',function(){ ... });
myApp.controller('CtrlName',['$filter', $filter, function(){
    var fromDate = ...;
    var toDate = ...;
    var data = [{ completed_date: ... }, ... ];
    $scope.myArray = $filter('dateRange')(data, fromDate, toDate);
}]);
相关文章：