I have an angular.js array of 3 products and a range slider that is counting from 0 - 20 with a step of 1. I need to make it so, as I slide the range slider it will filter my array and only show products with the height property that fits in that category.
ie: filtering 0 to 10 would show anything with a height of 0, 1, 2, 3, 5, 6, 7, 8, 9, 10.
This is not required for my question but if it was possible to append inches to the end of the value, I would appreciate that help as well.
My html is just a basic range slider set up:
<body ng-controller="MainCtrl" style="min-height: 600px" >
<div style="background-color: #808080;margin-left: 50px;margin-right: 50px; padding: 30px;">
<pre>{{ priceSlider | json }}</pre>
<rzslider
rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max"
rz-slider-step="{{priceSlider.step}}"></rzslider>
<div class="info" ng-repeat="p in products">
{{p.name}}
{{p.height}}
</div>
</div>
</body>
My App.js //app
var app = angular.module('plunker', ['rzModule']);
app.controller('MainCtrl', function($scope) {
$scope.priceSlider = {
min: 0,
max: 20,
ceil: 20,
floor: 0,
step: 1
};
$scope.products = [
{
name: 'one',
height: '00'
},
{
name: 'two',
height: '10'
},
{
name: 'three',
height: '20'
}
];
});
Since I have to call to some outside sources and have a ton of css in this aswell, here is a codepen link
I have been trying to solve this for days and am starting to question if it's even possible! Thanks for the help in advance!
You need to write your own AngularJS filter in order to acheive that.
In your Javascript
app.filter('onlyProductsWithinHeights', function(){
return function(products, minHeight, maxHeight){
var filtered = [];
angular.forEach(products, function(product){
if(product.height >= minHeight && product.height <= maxHeight)
filtered.push(product);
});
return filtered;
};
};
In your Markup
<div class="info" ng-repeat="p in products | onlyProductsWithinHeights:priceSlider.min:priceSlider.max">
{{p.name}}
{{p.height}}
</div>
Add the following function to your controller:
$scope.minFilter = function (p) {
return p.height >= $scope.priceSlider.min;
};
$scope.maxFilter = function (p) {
return p.height <= $scope.priceSlider.max;
};
Then use these filters in your ng-repeat:
<div class="info" ng-repeat="p in products | filter:minFilter | filter:maxFilter ">