Filtering multiple arrays in multiple definition lists with AngularJS

Question

I want to filter data in acordeon, which consists of 4 parts. My sample code is below (I cleared the acordeon codes and some other parts in my code)

<input type="text" ng-model="searchText" placeholder="Filter"> <dl> <dt ng-repeat-start="mainCategory in mainCategories | filter:searchText" > {{mainCategory.Name}} </dt> <dd ng-repeat-end=""> <dl> <dt ng-repeat-start="subCategory in subCategories[mainCategory.ID] | filter:searchText" > {{subCategory.Name}} </dt> <dd ng-repeat-end=""> <dl> <dt ng-repeat-start="lesson in subCategoryLessons[subCategory.ID] | filter:searchText" > {{lesson.Name}} </dt> <dd ng-repeat-end=""> <dl> <dt ng-repeat-start="subLesson in subLessons[lesson.ID] | filter:searchText"> {{subLesson.Header}} </dt> <dd ng-repeat-end=""> {{subLesson.Content}} </dd> </dl> </dd> </dl> </dd> </dl> </dd> </dl> 

Subcategory, lesson, and subLesson data comes from another service, and they are stored in different arrays.

I want to filter data in this view, including all data. But if I write some word in the subLesson (lower category) part, I should see the parent parts (html elements) for accessing the subliss data through the opening of acordeon.

Is it possible to create such a filter? All data will come from a web service with the JSON format. I have to consider ajax delay.

Answer 1

AFAIK, filter pipe will search in all properties of your object with infinite depth.

Therefore, you can apply a filter to the first mainCategories collection in the first ng-repeat, if and only if you have all of your subCategories contained in your mainCategories object, and so on .

For example, your data will look like this:

 mainCategories = [{ subCategories : [{ lessons : [{ subLessons : [{ ... }] ... }] ... }] ... }] 

And you will use it as follows:

 <dt ng-repeat-start="mainCategory in mainCategories | filter:searchText" > {{mainCategory.Name}} </dt> <dd ng-repeat-end=""> <dl> <dt ng-repeat-start="subCategory in mainCategory.subCategories">