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

Question

我正在尝试实现一个自定义过滤器,它返回两个日期范围之间具有"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,这让我觉得有更好的方法可以做到这一点.

提前致谢.

Answer 1

我可以分析你的问题.您的自定义过滤器中不需要$ 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>

希望能帮助到你.