Javascript 角度过滤器对象的多个字符串
我有一个JSON格式的数组(项目)。对象项目具有以下字段:Javascript 角度过滤器对象的多个字符串,javascript,html,angularjs,arrays,json,Javascript,Html,Angularjs,Arrays,Json,我有一个JSON格式的数组(项目)。对象项目具有以下字段: "name":"pname", "id":"1", "keywords":"aab bb cc" 我使用div标记显示这些对象 <div ng-repeat="p in projects | filter : searchText"> {{p.name}}, {{p.id}} etc. </div> 如何使其适用于对象?请参阅。您可以联接所有属性值,然后使用正则表达式匹配所有搜索词。我添加了一个边界条件
"name":"pname",
"id":"1",
"keywords":"aab bb cc"
我使用div标记显示这些对象
<div ng-repeat="p in projects | filter : searchText">
{{p.name}}, {{p.id}} etc.
</div>
如何使其适用于对象?请参阅。您可以联接所有属性值,然后使用正则表达式匹配所有搜索词。我添加了一个边界条件,即它匹配每个关键字的开头。如果不想进行边界匹配,可以对其进行修改
因此,如果您键入pname aa bb
sssearchText
,您将获得您的对象,因为它匹配所有术语。但是'pname aa zz'不会返回您的对象
app.filter('myFilter', ['$filter', function($filter) {
var buildMatchingString = function(object) {
var matchingString = '';
// Join all the property values into 1 string separated by a 'space'
// so that we can do boundary matching
angular.forEach(object, function(prop, key) {
matchingString += ((prop || '') + ' ');
});
return matchingString;
};
return function(list, searchText) {
if (!searchText) {
// Return everything if there is no user input
return list;
}
var result = [];
// Split all the search terms
var keywords = searchText.split(' ');
return $filter('filter')(list, function(elem) {
var matchingString = buildMatchingString(elem);
// Check that the properties of the object matches the
// beginning of ALL the search terms
for(var i = 0; i < keywords.length; i++) {
if (!matchingString.match(new RegExp('\\b' + keywords[i] + '.*', 'gi'))) {
return false;
}
}
return true;
});
};
}]);
app.filter('myFilter',['$filter',函数($filter){
var buildMatchingString=函数(对象){
var matchingString='';
//将所有属性值合并为一个字符串,并用“空格”分隔
//这样我们就可以进行边界匹配了
角度。forEach(对象、函数(道具、键){
匹配字符串+=((prop | |“)+”);
});
返回匹配字符串;
};
返回函数(列表、搜索文本){
如果(!searchText){
//如果没有用户输入,则返回所有内容
退货清单;
}
var结果=[];
//拆分所有搜索词
var关键字=searchText.split(“”);
返回$filter('filter')(列表,函数(elem){
var matchingString=buildMatchingString(elem);
//检查对象的属性是否与
//所有搜索词的开头
对于(var i=0;i
您只需在自定义过滤器内部使用角度过滤器的$filter功能即可
app.filter('myFilter', ['$filter', function($filter){
return function(data, text){
var textArr = text.split(' ');
angular.forEach(textArr, function(test){
if(test){
data = $filter('filter')(data, test);
}
});
return data;
}
}]);
然后将搜索文本作为参数传递给自定义过滤器,例如
<li ng-repeat="obj in objects | myFilter:searchText">{{obj.name}}</li>
{{{obj.name}
但是用于过滤字符串数组的方法似乎不适用于JSON对象。有什么区别
当过滤器的表达式
参数是字符串
时,Angular将尝试将给定的字符串
与仅一个特定键值对进行匹配,前提是所匹配的项属于对象
类型
作为参考,从角度文档:
字符串用于与数组的内容进行匹配。将返回数组中具有与此字符串匹配的字符串属性的所有字符串或对象。这也适用于嵌套对象特性
您似乎想要的行为是将字符串
与跨多个键值对的值相匹配
这就是说,您可以利用表达式
参数可以传递谓词函数
这一事实来引入更智能的匹配行为
请参阅下面的内容,以获得有效的解决方案。它可以进一步优化或调整以处理更多情况,即处理数组值
关于我的解决方案,需要注意的一点是,即使对象具有嵌套属性,它也支持匹配项。有没有办法从搜索中排除属性键?该对象实际上是来自sql查询的JSON_encode对象,其中一个键是BLOB。当我包含水滴时,过滤器出现故障。(ng重复:重复)当然。只需修改用于遍历对象的函数,以接受在遍历过程中忽略和跳过的属性键数组(请参见我的更新)。但是,我怀疑您的重复错误与排除属性键无关。如果Angular无法通过标识区分对象,则可以尝试将track by$index
附加到ng repeat
(有关详细信息,请参阅此)。
<li ng-repeat="obj in objects | myFilter:searchText">{{obj.name}}</li>