Filtering multiple arrays in multiple definition lists with AngularJS

Question

I want to filter data in an acordeon which is has 4 parts. My code's sample is below (I have cleared acordeon codes and some different 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 datas are come from another service and they are saving in different arrays.

I want to filter datas in this view include all data. But if I write some word in the subLesson part (the lowest category), I have to see parent parts(html elements) to reach sublesson data via opening acordeon.

Can I create a filter like this? All data will come from a web service with JSON format. I have to consider ajax latency.

Answer 1

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

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

For instance, your data will look like this :

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

And you'll use it like this :

<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">