AngularJS过滤器树结构按属性递归
[英]AngularJS filter tree structure recursively by property
问题描述
I tried multiple things now, but didn't had much success. 
我现在尝试了多种方法，但没有取得太大的成功。 Let's assume, that I have a list like this: 假设我有一个这样的列表：
[
{
"name": "Africa",
"translation": "Afrika",
"someNum": 87207,
"countries": [
{
"name": "Algeria",
"translation": "Algerien",
"someNum": 58020,
"countries": null
},
{
"name": "Morocco",
"translation": "Marokko",
"someNum": 27314,
"countries": null
},
{
"name": "Libya",
"translation": "Lybien",
"someNum": 77788,
"countries": null
},
{
"name": "Somalia",
"translation": "Somalia",
"someNum": 17945,
"countries": null
},
{
"name": "Kenya",
"translation": "Kenia",
"someNum": 12505,
"countries": null
},
{
"name": "Mauritania",
"translation": "Mauretanien",
"someNum": 25787,
"countries": null
},
{
"name": "South Africa",
"translation": "S\u00fcdafrika",
"someNum": 39997,
"countries": null
}
]
},
{
"name": "America",
"translation": "Amerika",
"someNum": 48450,
"countries": [
{
"name": "North America",
"translation": "Nordamerika",
"someNum": 23397,
"countries": [
{
"name": "Canada",
"translation": "Kanada",
"someNum": 58709,
"countries": null
},
{
"name": "USA",
"translation": "USA",
"someNum": 64725,
"countries": [
{
"name": "New York",
"translation": "New York",
"someNum": 50202,
"countries": null
},
{
"name": "California",
"translation": "Kalifornien",
"someNum": 92801,
"countries": [
{
"name": "Los Angeles",
"translation": "Los Angeles",
"someNum": 78283,
"countries": null
},
{
"name": "San Diego",
"translation": "San Diego",
"someNum": 30373,
"countries": null
},
{
"name": "Sacramento",
"translation": "Sacramento",
"someNum": 50721,
"countries": null
},
{
"name": "San Francisco",
"translation": "San Francisco",
"someNum": 65772,
"countries": null
},
{
"name": "Bakersville",
"translation": "Bakersville",
"someNum": 20390,
"countries": null
}
]
},
{
"name": "Lousiana",
"translation": "Lousiana",
"someNum": 26245,
"countries": null
},
{
"name": "Texas",
"translation": "Texas",
"someNum": 57720,
"countries": null
},
{
"name": "Nevada",
"translation": "Nevada",
"someNum": 41399,
"countries": null
},
{
"name": "Montana",
"translation": "Montana",
"someNum": 97221,
"countries": null
},
{
"name": "Virginia",
"translation": "Virginia",
"someNum": 64101,
"countries": null
}
]
}
]
},
{
"name": "Middle America",
"translation": "Mittelamerika",
"someNum": 60813,
"countries": [
{
"name": "Mexico",
"translation": "Mexiko",
"someNum": 97953,
"countries": null
},
{
"name": "Honduras",
"translation": "Honduras",
"someNum": 40591,
"countries": null
},
{
"name": "Guatemala",
"translation": "Guatemala",
"someNum": 41592,
"countries": null
}
]
},
{
"name": "South America",
"translation": "S\u00fcdamerika",
"someNum": 61507,
"countries": null
}
]
},
{
"name": "Asia",
"translation": "Asien",
"someNum": 38179,
"countries": [
{
"name": "China",
"translation": "China",
"someNum": 47266
},
{
"name": "India",
"translation": "Indien",
"someNum": 33424,
"countries": null
},
{
"name": "Malaysia",
"translation": "Malaysia",
"someNum": 38010,
"countries": null
},
{
"name": "Thailand",
"translation": "Thailand",
"someNum": 41356,
"countries": null
},
{
"name": "Vietnam",
"translation": "Vietnam",
"someNum": 79489,
"countries": null
},
{
"name": "Singapore",
"translation": "Singapur",
"someNum": 53176,
"countries": null
},
{
"name": "Indonesia",
"translation": "Indonesien",
"someNum": 89895,
"countries": null
},
{
"name": "Mongolia",
"translation": "Mongolei",
"someNum": 42783,
"countries": null
}
]
},
{
"name": "Europe",
"translation": "Europa",
"someNum": 84723,
"countries": [
{
"name": "North",
"translation": "Nord",
"someNum": 16833,
"countries": [
{
"name": "Norway",
"translation": "Norwegen",
"someNum": 11817,
"countries": null
},
{
"name": "Sweden",
"translation": "Schweden",
"someNum": 38210,
"countries": null
},
{
"name": "Finland",
"translation": "Finnland",
"someNum": 10669,
"countries": null
}
]
},
{
"name": "East",
"translation": "Ost",
"someNum": 28434,
"countries": [
{
"name": "Romania",
"translation": "Rum\u00e4nien",
"someNum": 45122,
"countries": null
},
{
"name": "Bulgaria",
"translation": "Bulgarien",
"countries": null
},
{
"name": "Poland",
"translation": "Polen",
"someNum": 84183,
"countries": null
}
]
},
{
"name": "South",
"translation": "S\u00fcd",
"someNum": 71856,
"countries": [
{
"name": "Italy",
"translation": "Italien",
"someNum": 76406,
"countries": null
},
{
"name": "Greece",
"translation": "Griechenland",
"someNum": 18189,
"countries": null
},
{
"name": "Spain",
"translation": "Spanien",
"someNum": 36148,
"countries": null
}
]
},
{
"name": "West",
"translation": "West",
"someNum": 33487,
"countries": [
{
"name": "France",
"translation": "Frankreich",
"someNum": 72622,
"countries": null
},
{
"name": "England",
"translation": "England",
"someNum": 51927,
"countries": null
},
{
"name": "Portugal",
"translation": "Portugal",
"someNum": 25502,
"countries": null
}
]
}
]
},
{
"name": "Oceania",
"translation": "Ozeanien",
"someNum": 69844,
"countries": [
{
"name": "Australia",
"translation": "Australien",
"someNum": 17211,
"countries": null
},
{
"name": "New Zealand",
"translation": "Neuseeland",
"someNum": 87401,
"countries": null
}
]
},
{
"name": "Arctica",
"translation": "Arktis",
"someNum": 67183,
"countries": null
},
{
"name": "Antarctica",
"translation": "Antarktis",
"someNum": 92518,
"countries": null
}
]
What I try to achieve, is to find all parents and/or children, matching my search criteria while keeping the whole tree intact. 我想要实现的是找到所有符合我搜索条件的父母和/或孩子，同时保持整棵树完整。
Let's say I am searching for Australia as value of the property name . 假设我要搜索Australia作为属性name值。 The expected result would be: 预期结果将是：
- Oceania
-- Australia
But what I get is 但是我得到的是
- Oceania
-- Australia
-- New Zealand
Another example: I am searching for Kalifornien as value of the property translation . 另一个示例：我正在搜索Kalifornien作为属性translation值。 The expected result would be: 预期结果将是：
- America
-- North America
--- USA
---- California
----- Bakersville
----- San Diego
----- Sacramento
----- San Francisco
----- Los Angeles
But the actual result is absolutely not, what you'd expect. 但是实际结果绝对不是您所期望的。
So the main problem I am experiencing is, that the original Angular filter doesn't process children correctly. 因此，我遇到的主要问题是，原始的Angular过滤器无法正确处理子级。
I have set up a Plunker to demonstrate the problem: https://plnkr.co/edit/3FavpC8XB3hTvT94fZli?p=preview 我已经设置了一个Plunker来演示该问题： https ://plnkr.co/edit/3FavpC8XB3hTvT94fZli?p=preview
I can also change the format of the JSON data, if that makes it easier to achieve a proper filtering. 我还可以更改JSON数据的格式，如果这样可以更轻松地实现正确的过滤。
EDIT: 编辑：
I've had partial success: https://plnkr.co/edit/lDoUK3?p=preview 我取得了部分成功： https ： //plnkr.co/edit/lDoUK3？p = preview
There's just one problem left. 只剩下一个问题了。 If I search (for example) for California, the objects from the countries property of the object with the name California are missing. 例如，如果我搜索“加利福尼亚”，则缺少名称为“加利福尼亚”的对象的“ countries属性中的对象。 So the last item is California (which is good so far), but I also need Bakersville, San Diego & co. 所以最后一个项目是加利福尼亚（到目前为止很好），但我还需要贝克斯维尔，圣地亚哥和公司。 under it. 在它下面。
1 个解决方案
解决方案1
0 已采纳 2017-04-01 12:35:20
If you want to get the subItems of your selected element in the list, you should add the items whose parent (Or some parent-of-parent) must appear in the list after filtering. 如果要在列表中获取所选元素的子项，则应添加过滤后其父项（或某些父项父项）必须出现在列表中的项。 To do this, I would recommend you to create a recursive function: 为此，我建议您创建一个递归函数：
this.getSelectedElementList = function(list, element) {
var result;
for (var i in list) {
if (list[i].name.toLowerCase().indexOf(element) > -1) {
return list[i];
} else {
if (list[i].countries && list[i].countries.length) {
result = this.getSelectedElementList(list[i].countries, element);
if (typeof result !== 'undefined') {
return result;
}
}
}
}
return result;
};
And you can call it inside your preFilter function twice. 您可以在preFilter函数中两次调用它。 The first time to get the parent object: 第一次获取父对象：
var parentList = _self.getSelectedElementList(_self.listItems, _self.filterQuery.toLowerCase());
And the second one to check that the current item is inside that object: 第二个检查当前项目是否在该对象内：
if (typeof parentList !== 'undefined' && parentList.countries && parentList.countries.length && typeof _self.getSelectedElementList(parentList.countries, item.name.toLowerCase()) !== 'undefined') {
path.push(item);
}
As you are currently filtering only by name, my proposal works this way. 由于您当前仅按名称进行过滤，因此我的建议以这种方式工作。 I have also updated your Plunkr 我也更新了您的Plunkr
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.