CODEWITHSUNDEEP
javascriptangularjs
Sparda
Sparda

Reputation: 610

How to Clear a Filter - AngularJS

I'm very new to AngularJS and was playing with filters today. I was able to apply the filter filter to display only rows matching the criteria from the select menus. However, I was unable to add a "clear filter" function to the button. How can I reset the filter when the button is clicked?

In the following Plunker, you can see the code I was using in attempts achieve this: Plunker - AngularJS Sample

Upvotes: 10

Views: 34768

Answers (3)

Charan Ghate
Charan Ghate

Reputation: 1394

This example will help you to clear filters if you are using the ng-table filter

<table ng-table="tableParams" show-filter="true" class="table table-striped table-bordered table-condensed table-hover cf">
    <tbody>
        <tr ng-repeat="tableData in $data">
            <td data-title="'Name'" filter="{Name:'text'}" sortable="'{Name}'" />
        </tr>
    </tbody>
</table>

You can clear filter from ng-click as below

$scope.tableParams.parameters({ filter: {}, sorting: {}, page: 1 });

Upvotes: 0

Walter Roman
Walter Roman

Reputation: 4779

The ng-click directive can be used to set the filter model to any falsey-but-not-false Javascript value, such as '', undefined, null or {}.

In the following code, clicking on the div would reset the customFilter model.

<input type="text" ng-model="customFilter" />
<div ng-click="customFilter = undefined">
    Clear Filter
</div>

Here's a link to an updated fork of your Plunker project using Angular v1.4.1

Upvotes: 29

Tosh
Tosh

Reputation: 36030

You can use ng-click to bind click handler to clear query variable within a scope.

http://plnkr.co/edit/p1DnoV

Upvotes: 25

Related Questions