在 angular ui-grid 中使用外部过滤触发两次

Question

我已经完成，但是，我遇到了应用过滤器奇怪触发的问题。让我试着向你解释一下。第一个过滤器请求如下所示：

?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7  OPTIONS 200 xhr angular.js:11881    505 B   17 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7  GET 200 xhr Other   15.3 KB 92 ms

我们有选择，也有得到，这很好。接下来我们应用第二个过滤器，请求如下所示：

?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7  GET 200 xhr angular.js:11881    15.3 KB 94 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 OPTIONS 200 xhr angular.js:11881    505 B   21 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 GET 200 xhr Other   15.8 KB 48 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7  OPTIONS 200 xhr angular.js:11881    505 B   22 ms

由于某种原因，请求触发了两次。接下来我们应用第三个过滤器，请求看起来像：

?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 OPTIONS 200 xhr angular.js:11881    505 B   18 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231;statusId==5 OPTIONS 200 xhr angular.js:11881    505 B   19 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 GET 200 xhr Other   15.8 KB 43 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231;statusId==5 GET 200 xhr Other   1.1 KB  27 ms   
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7  GET 200 xhr Other   15.3 KB 95 ms

我们可以看到该请求如何再次触发两次，但在最后它仅使用第一个过滤器发送了一个额外的请求。

谁能告诉我我的错误在哪里？提前致谢。我的过滤器代码：

  gridApi.core.on.filterChanged( $scope, function() {
                // Declare vars
                var grid = this.grid;
                var columns = grid.columns;
            $scope.columnTitle = grid.columns[1].filters[0].term;
            $scope.columnDesc = grid.columns[2].filters[0].term;
            var columnType = grid.columns[3].filters[0].term;
            var columnStudy = grid.columns[4].filters[0].term;
            var columnPriority = grid.columns[5].filters[0].term;
            var columnSeverity = grid.columns[6].filters[0].term;
            var columnStatus = grid.columns[7].filters[0].term;
            var columnCreatedDate = grid.columns[8].filters[0].term;
            var columnModifiedDate = grid.columns[9].filters[0].term;

            // Create request for selectable filters
            var query = [];
            var string;
            function request (id, param) {

                if(param === "title==" || param === "description=="){
                    query.push(param + "*" + id + "*")
                } else {
                    query.push(param + id);
                }

                if (query.length <= 1){
                    return query
                } else {
                    string = query.join(";");
                    return string;
                }
            }

            // Define behavior for cancel filtering
            $scope.isfilterclear = true;

            angular.forEach(columns, function( col ) {
                if(col.filters[0].term){
                    $scope.isfilterclear = false;
                }
            });
            if($scope.isfilterclear) {
                $timeout(function() {
                    $rootScope.refresh()
                },500);
            }

            // Filter behavior for columns
            if($scope.columnTitle) {
                $scope.$watch('columnTitle', function (newVal, oldVal) {
                    // filterOptions.filterParam = 'title==*' + newVal + "*";
                    filterOptions.filterParam =  request(newVal, 'title==*');
                }, true);
                getData()
            }
            if($scope.columnDesc) {
                $scope.$watch('columnDesc', function (newVal, oldVal) {
                    // filterOptions.filterParam = 'description==*' + newVal + "*";
                    filterOptions.filterParam =  request(newVal, 'description==');
                }, true);
                getData()
            }
            if(columnType) {
                filterOptions.filterParam = request(columnType, 'eventTypeId==');
                getData();
            }
            if(columnStudy) {
                filterOptions.filterParam = request(columnStudy, 'studyId==');
                getData();
            }
            if(columnPriority) {
                filterOptions.filterParam = request(columnPriority, 'priorityId==');
                getData();
            }
            if(columnSeverity) {
                filterOptions.filterParam = request(columnSeverity, 'severityId==');
                getData();
            }
            if(columnStatus) {
                filterOptions.filterParam = request(columnStatus, 'statusId==');
                getData();
            }
            if(columnCreatedDate){
                filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                getData()
            }
            if(columnModifiedDate){
                filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                getData()
            }


        });

Answer 1

您在每个列过滤器中调用 getData()，这就是您的请求触发两次或更多次的原因。像这样取出你的函数：

 // Filter behavior for columns
                if($scope.columnTitle) {
                    $scope.$watch('columnTitle', function (newVal, oldVal) {
                        filterOptions.filterParam =  request(newVal, 'title==*');
                    }, true);
                }
                if($scope.columnDesc) {
                    $scope.$watch('columnDesc', function (newVal, oldVal) {
                        filterOptions.filterParam =  request(newVal, 'description==');
                    }, true);
                }
                if(columnType) {
                    filterOptions.filterParam = request(columnType, 'eventTypeId==');
                }
                if(columnStudy) {
                    filterOptions.filterParam = request(columnStudy, 'studyId==');
                }
                if(columnPriority) {
                    filterOptions.filterParam = request(columnPriority, 'priorityId==');
                }
                if(columnSeverity) {
                    filterOptions.filterParam = request(columnSeverity, 'severityId==');
                }
                if(columnStatus) {
                    filterOptions.filterParam = request(columnStatus, 'statusId==');
                }
                if(columnCreatedDate){
                    filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                }
                if(columnModifiedDate){
                    filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                }

                getData();

在 angular ui-grid 中使用外部过滤触发两次

Twice firing with external filtering in angular ui-grid

javascript

angularjs

angular-ui-grid