Troy Bryant Troy Bryant - 10 months ago 253
Javascript Question

Angularjs clear multiple filters on button click

I have multiple filters from various select boxes on a page. My ideal functionality is to give the user the option to reset all the filters with a single button click. I'm able to achieve this individually with select boxes to reset that particular filter but not multiple filters at once.

Here is the code -

<div class="col-md-2">
<select class="form-control" ng-model="typeFilter">
<option value="">All</option>
<option>Special Order</option>
<div class="col-md-2">
<select class="form-control" ng-model="itemStatus">
<option value="">All</option>
<div class="col-md-2">
<button type="button" class="btn btn-large button-dropdown" data-translate="Rest_Filters" ng-click="vm.clearFilter()"> Rest Filters</button>

Controllers of what I've tried -

vm.clearFilter = function () {
vm.typeFilter = {};
vm.typeFilter = "";
vm.typeFilter = null;

vm.itemStatus = {};
vm.itemStatus = "";
vm.itemStatus = null;

I've also tried inline syntax such as

ng-click="typeFilter = null"
ng-click="typeFilter = {}"

and a few others but nothing seems to clear the filter.



it's something with your pointer variable

  $scope.clearFilter = function() {
    $scope.typeFilter = null;
    $scope.itemStatus = null;