Фильтрация вложенного массива

Question

В моем приложении у меня есть структура вроде этого:

[ ["section title", [{ item }, { item } ... ]], 
    ["section title", [{ item }, { item } ... ]], ... and so on 

На мой взгляд, я помещаю разделы в панели, а также их внутренние списки в списках:

<div class="panel panel-default" ng-repeat="section in index"> 
    <div class="panel-heading"><strong>{{section[0]}}</strong></div> 
    <ul class="list-group"> 
    <li class="list-group-item" ng-repeat="item in section[1]"> 
     ... item view here 

Но теперь я хочу добавить поиск, и я хочу, чтобы результаты поиска содержали только элементы из внутренних массивов. Я могу поставить функцию фильтра на верхнем уровне ...

ng-repeat="section in index | filter:matching()" 

и имею функцию matching() производить плоский список элементов в секциях, которые соответствуют поиску, но HTML настроен для обработки структуры сечения, а не плоский список. Что мне делать?

1. У меня есть фильтр, который дает результаты в структуре сечения, иногда с пустыми разделами (где нет элементов), а затем скрывать пустые разделы?

2. исправить это как-то в HTML, что-то вроде этого ...

   <div ng-if="searchText"> 
       --- I don't know what goes here 
   </div> 
   <div ng-if="!searchText"> 
       --- same as above 
   

   Эта вторая идея, кажется, страшно мне.

3. Что-то поумнее (надеюсь), что я пропускаю

Спасибо.

Answer 1

Theoratically, следующий код должен работать для вас (он работал для меня)

<div class="panel panel-default" ng-repeat="section in index | filter:matching()"> 
    <div class="panel-heading" ng-if="!searchText"><strong>{{section[0]}}</strong></div> 
    <ul class="list-group"> 
    <li class="list-group-item" ng-repeat="item in section[1]"> 
     ... item view here 

Хотя это будет создавать несколько Див и UL тегов, но вы всегда можете использовать этот

<ul class="list-group"> 
    <li ng-repeat-start="section in index | filter:matching()" style="display:none"></li> 
    <li class="list-group-item" ng-repeat="item in section"> 
     ... item view here 
    </li> 
    <li ng-repeat-end style="display:none"></li> 
</ul>