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:



and also the following div with ng-repeat:

<div ng-repeat="obj in objarr">
  {{}}: ${{obj.price}}


How can I create a filter such that only objets with obj ['price']> minPrice and obj ['price'] <maxPrice will show?


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.price}}





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) { 
      return filtered;


And then in code

<div ng-repeat="obj in list | pricebetween:300:500">


In the plnkr example, I also have more filter.



you can use ng-show filter :) it is very simple and fits your question, use it like span> {{}}: $ {{obj.price}} span> docs for ng-show: https : //

Best wishes:)



All Articles