3

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.

Pavan
  • 658
  • 2
  • 7
  • 28

2 Answers2

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

fnx
  • 369
  • 1
  • 5
  • 16
  • Not working. This hides all the items beforehand. Should be able to hide non-matching elements after the search term is entered – Pavan Nov 19 '16 at 10:03
  • Try replacing ng-if with this: `ng-if="searchLibrary.text === '' || w === searchLibrary.text"` – fnx Nov 19 '16 at 10:17
0

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)">
stateless
  • 246
  • 1
  • 7