i'm using rangle slider on my project. i want to filter the ng-repeat on sliding of range slider. i want to filter the data on the price. my code html:-
<range-slider min="slider.min" max="slider.max" step="slider.step" lower-value="slider.min" upper-value="slider.max"></range-slider>
<div ng-repeat="data in data|filter:rangeFilter()">
Property: {{data.name}}
price: {{data.price}}
</div>
controller:-
$scope.data = [{
name : hoarding1,
price : 50000
},
{
name : hoarding2,
price : 50000
},
{
name : hoarding3,
price : 50000
}
]
$scope.slider = {
step : 10000,
min : Math.min.apply(Math,$scope.data.map(function(item){return item.price;})),
max : Math.max.apply(Math,$scope.data.map(function(item){return item.price;}))
}
$scope.rangeSlider = function (){
return function( items, rangeInfo ) {
var filtered = [];
var min = parseInt(rangeInfo.min);
var max = parseInt(rangeInfo.max);
// If time is with the range
angular.forEach(items, function(item) {
if( item.price >= min && item.price <= max ) {
filtered.push(item);
}
});
return filtered;
};
this is not worked for me. Please help me :-(
I think u need a custom filter which filters for a particular price and show the particular item which has the filter boundary on the price , please see the below code
controller :
$scope.rangeInfo = {
min : Math.min.apply(Math,$scope.data.map(function(item){return item.price;})),
max : Math.max.apply(Math,$scope.data.map(function(item){return item.price;}))
}
template:
<div ng-repeat="data in data | priceRange:rangeInfo">
Property: {{data.name}}
price: {{data.price}}
</div>
filter
you can use forEach array method or filter method of array(ES5)
app.filter('priceRange',function(){
return function(arrayItems,rangeInfo){
return arrayItems.filter(function(item){
console.log(item.price);
return (item.price > rangeInfo.min && item.price < rangeInfo.max);
});
}
});
ES2015 (ES6) filter method using arrow functions
app.filter('priceRange',function(){
return function(arrayItems,rangeInfo){
return arrayItems.filter((item) => (item.price > rangeInfo.min && item.price < rangeInfo.max));
}
});