AngularJS filter with integer comparison
so I have a "price" field on my site made with a jQuery-UI slider. This field consists of 2 integer values: minPrice and maxPrice.
Suppose I have an array of objects that looks like this:
objarr=[
{
'name'='item1',
'price'=100
},
{
'name'='item2',
'price'=200
},...
]
and also the following div with ng-repeat:
<div ng-repeat="obj in objarr">
{{obj.name}}: ${{obj.price}}
</div>
How can I create a filter such that only objets with obj ['price']> minPrice and obj ['price'] <maxPrice will show?
+3
source to share
3 answers
You can write a simple helper function in your controller:
$scope.filterRange = function(obj) {
return obj.price > $scope.range.minPrice && obj.price <= $scope.range.maxPrice;
};
and use it in HTML:
<div ng-repeat="obj in objarr | filter:filterRange">
{{obj.name}}: ${{obj.price}}
</div>
Demo: http://plnkr.co/edit/uoynjdSI1ajrm02qp3v8?p=preview
+3
source to share
Another way is to write an Angular filter
app.filter('pricebetween', function(){
return function(items, min, max) {
var filtered = [];
angular.forEach(items, function(item, key) {
if(item.price <= max && item.price >= min) {
filtered.push(item);
}
});
return filtered;
};
});
And then in code
<div ng-repeat="obj in list | pricebetween:300:500">
In the plnkr example, I also have more filter.
+1
source to share
you can use ng-show filter :) it is very simple and fits your question, use it like span> {{obj.name}}: $ {{obj.price}} span> docs for ng-show: https : //docs.angularjs.org/api/ng/directive/ngShow
Best wishes:)
0
source to share