Как показать/скрыть компонент пользовательского интерфейса на основе результатов фильтрации в AngularJS?

У меня есть структура вложенной таблицы, в которой таблица заполняется на основе ng-repeat объекта Javascript «metasetHashSplit», и эта таблица, в свою очередь, имеет таблицу, которая заполняется на основе свойства внутри, называемого «ids». У меня есть требование, когда мне нужно скрыть основной ng-repeat, если все элементы во внутренней таблице отфильтрованы. Я использую "трубу"/"|" фильтр для внутренних таблиц. Я не могу понять, когда и как запускать ng-show/hide в зависимости от того, отфильтрованы ли все записи во внутренней таблице.

Вот как настраивается код:

<tbody  ng-repeat="(metaset, ids) in metasetHashSplit">
<tr class = "meta">
    <td   rowspan = 100 >{{metaset}}</td>
</tr>
<tr class = "meta" style="margin:0;padding:0;"  ng-repeat="item in ids" >
    <td class = "innerTable">
        <table class="table  child table-hover table-bordered table-condensed " >
            <tr ng-repeat="buy in item.Buy  | filter:{ MBC: by_buyMBC }" >
                <td >{{buy.BuyId}}</td>
                <td >{{buy.BuyRelease}}</span></td>
                <td >{{buy.BuyComponentAffected}}</td>
                <td >{{buy.BuyStatus}}</span></td>
            </tr>
        </table>
    </td>
</tr>

Could somebody help me if they have found themselves in a position like this? Basically the tbody needs to show/hide with respect to the |filter:{MBC:by_buyMBC} results!


person lostalien    schedule 02.11.2015    source источник


Ответы (1)


На основе этого вопроса используйте:

<div ng-repeat="buy in filtered = (item.Buy | filter:{ MBC: by_buyMBC })">
</div>

Таким образом, все, что вам нужно сделать, чтобы показать и скрыть, это использовать ng-if="filtered.length > 0" для правильного элемента.

person Chris    schedule 02.11.2015
comment
Это потрясающе. Как я пропустил это! Спасибо, попробуем это и посмотрим. - person lostalien; 03.11.2015
comment
Я тоже скучал по нему, пока однажды он мне не понадобился, а потом пришлось гуглить как плохой мальчик :D - person Chris; 03.11.2015
comment
Похоже, объем вложенных ng-repeats, вероятно, вызовет много осложнений. Например, var filtered не распознается родительским циклом ng-repeat, который необходимо отображать/скрывать на основе отфильтрованного - person lostalien; 03.11.2015
comment
В этом случае вам, возможно, придется выполнить фильтрацию на контроллере, используя $filter, во что-то вроде $scope.filteredBuyList, а затем привязать к этому - person Chris; 03.11.2015
comment
Думая об этом, вы могли бы ПОПРОБОВАТЬ что-то дерзкое и сделать что-то вроде buy in item.filtered = (item.buy | ..., а затем посмотреть, сможете ли вы привязаться к этому - person Chris; 03.11.2015