隐藏Angular中数组中的非匹配元素

Question

I have a search box with a ng-model assigned to it:

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

And a ng-repeat with a filter searchLibrary.text

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

So, when the user enters something, the filter removes all non-matching elements from the array, but is there a way to hide non-matching elements instead of removing them?

The reason why removing elements is problematic is I have a callback method assigned to the ng-repeat which gets called when a item is removed but it gets triggered when a user searches for some item which isn't the correct behaviour.

Edit : All the elements in the items array are draggable, so the user can manually drag and drop items from panel A to panel B. The callback is triggered when an item gets removed, but it shouldn't get triggered when user searches for a item description.

Any help is much appreciated.

Answer 1

You can use ng-if or ng-show to hide elements. You could replace

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

with

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

Here's a link to an example on CodePen https://codepen.io/anon/pen/VmPzMz

Answer 2

You could also use an ng-class.

.is-hidden {
    display: none;
}

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