AngularJS Smart Table多关键词空格分隔自定义过滤器问题求助
解决AngularJS多关键词全局过滤问题
我看了你代码里的几个核心问题,导致多关键词过滤不符合预期:
- 你使用了
trueList但没有提前声明,这会引发运行时未定义错误 - 当前逻辑是只要找到任意一个关键词匹配就标记为符合,但你需要的是所有关键词都必须在数据的某个属性中找到匹配才能返回该条目
下面是修复后的完整过滤器代码:
app.filter('multiWordFilter', ['$filter', function ($filter) { return function (input, predicate) { var searchValue = predicate['$']; // 定义自定义判断逻辑 var customPredicate = function (value, index, array) { // 如果没有搜索值,直接返回所有数据 if (typeof searchValue === 'undefined' || !searchValue.trim()) { return true; } // 分割关键词,过滤掉空字符串(处理连续空格的情况) var splitKeywords = searchValue.split(' ').filter(keyword => keyword.trim() !== ''); // 如果分割后没有有效关键词,返回所有数据 if (splitKeywords.length === 0) return true; // 获取当前数据项的所有属性 var propList = Object.getOwnPropertyNames(value) || []; // 跟踪所有关键词是否都匹配成功 var allKeywordsMatched = true; // 遍历每个关键词,检查是否存在匹配的属性 for (var j = 0; j < splitKeywords.length; j++) { var keyword = splitKeywords[j].toLowerCase(); var keywordMatched = false; // 遍历当前数据项的所有属性 for (var i = 0; i < propList.length; i++) { var prop = propList[i]; // 只处理字符串类型的属性 if (typeof value[prop] !== 'string') continue; var propValue = String(value[prop]).toLowerCase(); // 如果当前属性包含关键词,标记该关键词匹配成功,跳出属性循环 if (propValue.indexOf(keyword) > -1) { keywordMatched = true; break; } } // 如果有一个关键词没匹配到,直接标记整个数据项不符合 if (!keywordMatched) { allKeywordsMatched = false; break; } } // 只有所有关键词都匹配成功,才返回true return allKeywordsMatched; } return $filter('filter')(input, customPredicate, false); } }])
关键修改点说明:
- 修复未定义变量问题:新增了
splitKeywords、allKeywordsMatched等变量的声明,避免运行时错误 - 调整匹配逻辑:从「任意关键词匹配」改为「所有关键词必须匹配」——遍历每个关键词,确保每个关键词都能在数据项的某个属性中找到匹配
- 处理空关键词:用
filter过滤掉分割后的空字符串,避免连续空格导致的无效匹配 - 优化大小写处理:统一转为小写进行匹配,确保搜索不区分大小写
测试验证:
- 输入
8765270810:两个数据项的ContactNo都包含该值,返回两条数据 - 输入
8765270810 Asraf:只有第一条数据同时匹配号码和姓名,返回第一条数据 - 输入
Ram 876:返回第二条数据,因为它同时包含Ram和876(在ContactNo中)
这样就完全符合你期望的多关键词全局过滤需求啦!
内容的提问来源于stack exchange,提问作者Mohideen Asraf
相关产品推荐
相关产品推荐

