问题
There is a multi level java script object.Then I print these object using ng-repeat recursively.Now I filter the nodes.When I give the search string it only shows the matching string.But what I am looking for is it should filter along with its parent tree.Example if I search for keyword "self" then there are two nodes having "Self" keyword.They are
- Pateint: Self
- D or DA: Self / Care team
And their parent is
- Step 1: User types allowed to access
and it's parent is
- Access details
and it's parent is
- Master
.Like this hierarchy it should filter. But it filter only
Pateint: Self
D or DA: Self / Care team
Suppose in search box I give keyword "Self". It should return
Master
Access details
Step 1: User types allowed to access
Pateint: Self
D or DA: Self / Care team
But it return
- Pateint: Self
- D or DA: Self / Care team
What I am looking for is if a string is searched it should show along with its parent node. How to solve?Please help.
var app = angular.module('app', []);
app.controller('AppCtrl', function ($scope) {
console.log(22);
$scope.categories = [
{"id":"1","linkStatus":"no","title":"Master","tag":["head"],"categories":[{"id":"1.1","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'userRole'})","title":"User roles","tag":["ur","ru"]},{"id":"1.2","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'assets'})","title":"Assets","tag":["as","st"]},{"id":"1.3","linkStatus":"no","title":"Access details","tag":["ad","da"],
"categories":[{"id":"1.3.1","linkStatus":"no","title":"Step 1: User types allowed to access","tag":["tf","ft"],"categories":[{"id":"1.3.1.1","linkStatus":"no","title":"Pateint: Self","tag":["ps","sp"]},{"id":"1.3.1.2","linkStatus":"no","title":"D or DA: Self / Care team","tag":["ct","tc"]},{"id":"1.3.1.3","linkStatus":"no","title":"Admin: Everyone","tag":["av","va"]}]},{"id":"1.3.2","linkStatus":"no","title":"Step 2: Plugin relevance for different roles or types","tag":["po","op"],"categories":[{"id":"1.3.2.1","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'plugins'})","title":"Step 2a: User plugins","tag":["sd","ds"]},{"id":"1.3.2.2","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'eventPlugins'})","title":"Step 2b: Event plugins","tag":["aw","wa"]}]}]
},{"id":"1.4","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'appPermission'})","title":"App access details","tag":["wa","aw"]},{"id":"1.5","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'careTeam'})","title":"Care Team","tag":["df","fd"]},{"id":"1.6","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'apptNoteConfig'})","title":"Appointment Note Configuration","tag":["dj","jd"]},{"id":"1.7","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'noteLockPermission'})","title":"Note lock permission settings","tag":["rr","yy"]},{"id":"1.8","linkStatus":"yes","link":"masterDb.sectionPage({sectionName: 'locations'})","title":"Savant Care office locations","tag":["rr","yy"]}]
},
{
"id":"2",
"linkStatus":"no",
"title":"Billing",
"tag":["t","jt"],
"categories":[
{
"id":"2.1",
"linkStatus":"yes",
"link":"masterDb.sectionPage({sectionName: 'eligibleDetail'})",
"title":"Eligible Details",
"tag":["we","ew"]
},{
"id":"2.2",
"linkStatus":"yes",
"link":"masterDb.sectionPage({sectionName: 'cptCodes'})",
"title":"CPT",
"tag":["dd","ss"],
"categories":[
{
"id":"2.2.1",
"linkStatus":"yes",
"link":"masterDb.sectionPage({sectionName: 'cptCodesRates'})",
"title":"CPT code ratesz",
"tag":["ss","ww"]
}
]
}
]
},
];
});
app.filter('myFilter', function () {
return function(items, searchString) {
var arr=[];
if (!searchString) {
return items;
}
else
{
var countdown = function(items)
{
angular.forEach(items, function (value, key) {
var title=value.title.toLowerCase();
if(title.indexOf(searchString.toLowerCase()) !== -1)
{
arr.push(value);
}
if('categories' in value)
{
return countdown(value.categories);
}
})
}
countdown(items);
return arr;
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller='AppCtrl'>
<input type="text" ng-model="test">
<script type="text/ng-template" id="categoryTree">
<span ng-if="category.linkStatus=='yes'">
<a ui-sref="{{category.link}}" ui-sref-active="activeState"> {{ category.title }}</a>
</span>
<span ng-if="category.linkStatus=='no'">
{{ category.title }}
</span>
<ul ng-if="category.categories">
<li ng-repeat="category in category.categories | myFilter:test" ng-include="'categoryTree'">
</li>
</ul>
</script>
<ul>
<li ng-repeat="category in categories | myFilter:test " ng-include="'categoryTree'"></li>
</ul>
</div>来源：https://stackoverflow.com/questions/46382746/how-to-implement-recursive-search-filter-in-agngulrjs