CODEWITHSUNDEEP
angularjs
user2727195
user2727195

Reputation: 7340

ng-repeat filter to reset after I hide the search textfield

I've a search type textfield serving as a filter for the ng-repeat list.

<div class="search pull-right">
    <div class="magnify"><img src="img/magnify.png" ng-click="magnify()"></div>
</div>
<div class="search-box" ng-show="showSearch">
    <input type="search" id="searchField" name="" value="" placeholder="Search" class="textfield" ng-model="search.firstName" /> 
</div>

once I hide the search field, the results are stucked and not getting reset,

in the magnify function defined on scope I'm setting showSearch to true/false

Things I've tried without success. 

document.getElementById("searchField").value = "";
$scope.search.firstName='';

and my template

<li class="table-view-cell attendee" ng-repeat="attendee in attendees | filter:search">
    <h2 class="name">{{attendee.firstName}} {{attendee.lastName}}</h2>
    <span class="job">{{attendee.title}}</span>
    <span class="company">{{attendee.company}}</span>
</li>

Upvotes: 2

Views: 5002

Answers (2)

Weston Ganger
Weston Ganger

Reputation: 6732

If your data type is an object do

$scope.search = {};

If your data type is a string do

$scope.search = '';

Do Not make the mistake of trying to set it to null because that will not work

Upvotes: 2

pbkhrv
pbkhrv

Reputation: 647

Since you are using the filter "object" as the criteria (see https://docs.angularjs.org/api/ng/filter/filter), Angular will try to match attendee's properties against properties of search. In order to reset the filter, you need to do

$scope.search = {};

Upvotes: 3

Related Questions