Фильтр повторения для динамически создаваемой переменной

Question

Ранее я использовал трюк для динамического генерирования такой переменной:

<div ng-click="showHide=(showHide ? false : true)">toggle bool</div>
<header ng-show="showHide"></header>

Приведенный выше код сгенерирует локальную переменную с именем showHide, которую я могу использовать в атрибутах ng- *.В этом случае при нажатии на div заголовок скрыт.

Есть ли способ создать аналогичное решение для ng-repeat фильтра , без необходимости добавления функциональности к контроллеру (как в примере выше)?

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

Это фрагмент моего кода:

<!-- stat table -->
<tr ng-repeat="type in $ctrl.typeOfCategory">
    <td ng-click="filterCategory=(filterCategory ? type.name : '')">{{type.name}}</td>
</tr>

<!-- timeline -->
<div class="timeline-item" ng-repeat="msg in $ctrl.msgs | filter: filterCategory">
<div class="category">{{msg.type}}</div>
</div>

Итак,всякий раз, когда я щелкаю элемент в таблице, я хочу, чтобы временная шкала отфильтровывала все остальные элементы.На мой взгляд, filterCategory теперь должен содержать значение того, что есть {{type.name}}, и отфильтровывать все остальное.

Достигается ли что-то подобное в углах или я расширяю эту технику до предела?

Спасибо.

Answer 1

ng-repeat создает собственную область видимости. Вы должны определить filterCategory в области видимости контроллера, т.е. $ctrl.filterString, а затем использовать его.

<!-- stat table -->
<tr ng-repeat="type in $ctrl.typeOfCategory">
     <td ng-click="$ctrl.filterString=((type.name == $ctrl.filterString) ? '' : type.name)">{{type.name}}</td>
</tr>

<!-- timeline -->
<div class="timeline-item" ng-repeat="msg in $ctrl.msgs | filter: {type : $ctrl.filterString}">
<div class="category">{{msg.type}}</div>
</div>