javascript - 在 Angular ui 网格中使用外部过滤两次触发

Question

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

?$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();