javascript - 如何在具有 NULL 值的 angularjs 中实现类似 Excel 的过滤器？

Question

我是 AngualarJS 的新手，我需要使用 angulajs(v.1) 为表实现类似 Excel 的过滤器。我搜索了这个网站并在这里找到了解决方案:
https://stackoverflow.com/a/49655718/9967249

上述解决方案工作正常，但如果我的列表中有 null 或空值，则它不起作用。

在这种情况下，Search Text 功能适用于 Status 列，因为它填充了所有值，但由于所有其他列都具有空值，Search Box 功能不起作用。

请参阅上述解决方案使用 Controller 中变量的数据，但我使用的是 Backend(SpringBoot) 的数据并将其用作列表。

遇到这种情况，请帮帮我。

这是我的 Controller 类的片段

var usecaseData = UseCaseOverview.get(function (){

        $scope.XLfilters = { list: [], dict: {}, results: [] };

        $scope.markAll = function(field, b) {
              $scope.XLfilters.dict[field].list.forEach(function(x){x.checked=b;});
              /*$scope.XLfilters.dict[field].list.forEach((x)=>{x.checked=b;});*/
            }

        $scope.clearAll = function(field) {
              $scope.XLfilters.dict[field].searchText='';
              $scope.XLfilters.dict[field].list.forEach(function(x){x.checked=true;});
              /*$scope.XLfilters.dict[field].list.forEach((x)=>{x.checked=true;});*/
            }

        $scope.XLfiltrate = function() {
            var i,j,k,selected,blocks,filter,option, data=$scope.XLfilters.all,filters=$scope.XLfilters.list;
            $scope.XLfilters.results=[];
            for (j=0; j<filters.length; j++) {
                filter=filters[j];
                filter.regex = filter.searchText.length?new RegExp(filter.searchText, 'i'):false;
                for(k=0,selected=0;k<filter.list.length;k++){
                    if(!filter.list[k].checked)selected++;
                  filter.list[k].visible=false;
                  filter.list[k].match=filter.regex?filter.list[k].title.match(filter.regex):true;
                }
                filter.isActive=filter.searchText.length>0||selected>0;
            }
            for (i=0; i<data.length; i++) {
                blocks={allows:[],rejects:[],mismatch:false};
                for (j=0; j<filters.length; j++) {
                  filter=filters[j]; option=filter.dict[data[i][filter.field]];
                  (option.checked?blocks.allows:blocks.rejects).push(option);
                  if(filter.regex && !option.match) blocks.mismatch=true;
                }
                if(blocks.rejects.length==1) blocks.rejects[0].visible=true;
                else if(blocks.rejects.length==0&&!blocks.mismatch){
                  $scope.XLfilters.results.push(data[i]);
                    blocks.allows.forEach(function(x){x.visible=true});
                    /*blocks.allows.forEach((x)=>{x.visible=true});*/
                }
            }
            for (j=0; j<filters.length; j++) {
                filter=filters[j];filter.options=[];
                for(k=0;k<filter.list.length;k++){
                  if(filter.list[k].visible && filter.list[k].match) filter.options.push(filter.list[k]);
                }
            }
        }


                    function createXLfilters(arr, fields) {
              $scope.XLfilters.all = arr;             
              for (var j=0; j<fields.length; j++) $scope.XLfilters.list.push($scope.XLfilters.dict[fields[j]]={list:[],dict:{},field:fields[j],searchText:"",active:false,options:[]});
              for (var i=0,z; i<arr.length; i++) for (j=0; j<fields.length; j++) {
                  z=$scope.XLfilters.dict[fields[j]];
                  z.dict[arr[i][fields[j]]] || z.list.push(z.dict[arr[i][fields[j]]]={title:arr[i][fields[j]],checked:true, visible:false,match:false});
              }
        }

        createXLfilters(usecaseData.list, ['searchId', 'ucname', 'company', 'division0', 'valueChain0', 'country', 'aiuc', 'resPerson', 'resPersonEmail', 'assocPerson1', 'assocPersonEmail1', 
            'pocSwarm', 'respBusinessUnit', 'emailRespBusinessUnit', 'businessDept', 'respItx', 'emailRespItx', 'itxDept', 'externalPartner', 'ucFullName', 'businessNeed', 
            'rolesResponsibilities', 'appearanceDate', 'dependencies', 'expetedBenefit', 'monetaryBenefit', 'problemType', 'method', 'dataSources', 'monetizeData', 'knowCustomer', 
            'incUtilization', 'monetization', 'stratAddedValue','feasibility', 'mvp', 'tagsKeywords', 'phase', 'activity', 'ucStatus', 'activityStart', 'curStatusComments', 'nextSteps', 
            'pocStartDate', 'availabilityDate', 'pocPresentationDate', 'decisionDate', 'appLiveDate', 'pocResult', 'pocTargetDate', 'datePocClosing']);
        //createXLfilters(vm.usecase_overview, ['ucname','resPerson']);             
    });

Answer 1

经过对代码的研究，我终于想出了一个解决方案。当找不到元素时，列表返回未定义。所以它不适用于 Null 值。

只需在 Controller 的 XLfiltrate 函数中添加一个未定义的检查就可以了。

if(filter.list[k].title){
                      filter.list[k].match=filter.regex?filter.list[k].title.match(filter.regex):true;
                  }