Menu
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
370
The Clear button clears just the filter UI, whereas the Reset button clears the filter UI and removes any active filters for that column. The Cancel button will discard any changes that have been made in the UI, restoring the state of the filter to match the applied model.
The “filter” Filter in AngularJS is used to filter the array and object elements and return the filtered items. In other words, this filter selects a subset (a smaller array containing elements that meet the filter criteria) of an array from the original array.
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
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
