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

还有我 Controller 中的过滤器；

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

希望对您有所帮助。