I am new to using angularjs and I am working on implementing a price range filter with nouislider for a list of products with different prices. I want the filtering to happen only after the user clicks on the filter button. Below is the HTML code for my "slide filter":
<section class="filter-section">
<h3>Price</h3>
<form method="get" name="price-filters">
<span ng-click="price_slider.start = [180, 1400]" class="clear" id="clearPrice" >Clear</span>
<div class="price-slider">
<div id="price-range" ya-no-ui-slider="price_slider"></div>
<div class="values group">
<!--data-min-val represent minimal price and data-max-val maximum price respectively in pricing slider range; value="" - default values-->
<input class="form-control" name="minVal" id="minVal" type="text" ng-model="price_slider.start[0]">
<span class="labels">€ - </span>
<input class="form-control" name="maxVal" id="maxVal" type="text" ng-model="price_slider.start[1]">
<span class="labels">€</span>
</div>
<input class="btn btn-primary btn-sm" type="submit" ng-click="priceFiltering('filter')" value="Filter">
</div>
</form>
</section>
This is the code for the price slider in my controller:
$scope.price_slider = {
start: [180, 1400],
connect: true,
step: 1,
range: {
min: 10,
max: 2500
}
};
And here is the filter function in my controller:
$scope.priceFiltering = function(command){
if (command === "filter"){
$scope.pricefilter = function (product) {
if ((product.price <= $scope.price_slider.start[1])&&(product.price >= $scope.price_slider.start[0])){
return product;
}
};
command = "nofilter";
}
}
The filter is applied using ng-repeat like this:
<div ng-repeat="product in products | filter:pricefilter | orderBy:propertyName:reverse">...
</div>
Currently, the filter works as expected initially where the user selects a price range on the slider (e.g., min 800€ and max 1000€) and clicking the filter button displays the correct products. However, when the user moves the slider again, the filter immediately updates the products. I would like the filtering to occur only when the filter button is clicked. I believe I'm close to achieving this behavior but need some assistance. Can anyone help me with this?