Sam Sam - 3 months ago 16
AngularJS Question

Filtering multiple arrays in multiple definition lists with AngularJS

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

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