对动态创建的变量进行 ng 重复过滤

Question

之前我使用了一个技巧来动态生成这样的变量：

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

上面的代码将生成一个名为 showHide 的局部变量，我可以在 ng-* 属性上使用它。在这种情况下，当单击 div 时，会隐藏标题。

有没有办法为ng-repeat 的过滤器创建类似的解决方案，而无需向控制器添加功能（如上面的示例）？

在下面的示例中，我有一个包含一堆项目的时间线。我还有一个关于此时间线中存在哪些项目的统计表。我希望能够使用与 showHide 示例相同的方法按类别过滤这些项目。

这是我的代码的 sn-p：

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