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

Question

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

0

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

[ ["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 настроен для обработки структуры секций, а не для плоского списка. Что мне делать?

мой фильтр дает результаты в структуре секций, иногда с пустыми разделами (где нет элементов), а затем скрывать пустые разделы?
исправить это как-то в html, что-то вроде этого...
```
<div ng-if="searchText">
    --- I don't know what goes here
</div>
<div ng-if="!searchText">
    --- same as above
```
Эта вторая идея кажется мне ужасной.
Что-то умнее (надеюсь), что мне не хватает

Благодарю.

user1272965 24 май 2016, в 16:49

Источник

Теги:

javascript

html

angularjs

1 ответ

Ещё вопросы

Anshuman · Answer 1 · 2016-05-24T14-12-00.000Z

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

<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

Хотя это создаст несколько тегов div и 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>