Question

我正在尝试实施一个自定义过滤器，该过滤器会返回包含＆＃39; completed_date＆＃39;在两个日期范围之间。

然而，我发现我需要访问我的过滤器中的$ scope以获取两个日期＆＃39; pick＆＃39;来自datepickers。

我不认为我可以使用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>

希望它有所帮助。

Answer 2

每次应用新过滤器时，都会告诉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);
}]);

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

2 个答案: