在Angular中隐藏数组中的不匹配元素

Posted 2023-02-19

【中文标题】在Angular中隐藏数组中的不匹配元素

【英文标题】：Hide non matching elements from array in Angular

【发布时间】：2017-04-03 01:30:36

【问题描述】：

我有一个分配有 ng-model 的搜索框：

<input type="text" class="form-control" placeholder="Search" ng-model="searchLibrary.text">

还有一个带有过滤器的 ng-repeat searchLibrary.text

<div ng-repeat="w in items | filter:searchLibrary.text" on-item-removed="onItemRemoved(item)">

那么，当用户输入内容时，过滤器会从数组中移除所有不匹配的元素，但是有没有办法隐藏不匹配的元素而不是移除它们呢？

删除元素有问题的原因是我有一个回调方法分配给ng-repeat，当一个项目被删除时它会被调用，但是当用户搜索一些不是正确行为的项目时它会被触发。

编辑：items数组中的所有元素都是可拖动的，因此用户可以手动将项目从面板A拖放到面板B。当项目被删除时触发回调，但不应在用户搜索项目描述时触发。

非常感谢任何帮助。

【问题讨论】：

我想知道，当元素从过滤后的集合中删除时，回调是如何被触发的。

Angularjs filter negated的可能重复

【参考方案1】：

您可以使用ng-if 或ng-show 隐藏元素。你可以替换

<div ng-repeat="w in items | filter:searchLibrary.text" on-item-removed="onItemRemoved(item)">

与

<div ng-repeat="w in items" ng-if="w === searchLibrary.text" on-item-removed="onItemRemoved(item)">

这是 CodePen 上的示例链接https://codepen.io/anon/pen/VmPzMz

【讨论】：

不工作。这会预先隐藏所有项目。输入搜索词后应该可以隐藏不匹配的元素

尝试用这个替换 ng-if：ng-if="searchLibrary.text === '' || w === searchLibrary.text"

【参考方案2】：

您也可以使用 ng-class。

.is-hidden 
    display: none;


<div ng-repeat="w in items" ng-class="'is-hidden': w===searchLibrary.text"
    on item-removed="onItemRemoved(item)">