AngularJS filter with integer comparison

Question

so I have a "price" field on my site made using JQuery-UI slider. This field consists of 2 integer values: minPrice, and maxPrice.

Assume 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 do I create a filter such that only objets with obj['price'] > minPrice and obj['price'] < maxPrice will show?

dfsq · Accepted Answer · 2014-09-25 08:13:38Z

3

You can write a simple helper function in 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

answered Sep 25, 2014 at 8:13

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Discombobulous Over a year ago

When I tried this method, it didn't work because the value for $scope.range was set after the objects have loaded. Also the filter didn't get updated after the values for $scope.range changed.

dfsq Over a year ago

In both cases you probably don't trigger $digest loop.

dreamweiver Over a year ago

simple solution, superb :)

Sergey Romanov · Accepted Answer · 2014-09-25 09:42:54Z

1

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 the code

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

In plnkr example I also have greater than filter.

http://plnkr.co/edit/f0hJpwK4TrwdgJvPRZRo

answered Sep 25, 2014 at 9:42

Sergey Romanov

3,0905 gold badges26 silver badges39 bronze badges

Comments

furkankatman · Accepted Answer · 2014-09-25 08:52:03Z

0

you can use ng-show filter :) , it is very easy and fits in your question , use it like that , span> {{obj.name}}: ${{obj.price}} span> docs for ng-show: https://docs.angularjs.org/api/ng/directive/ngShow

Best Wishes :)

answered Sep 25, 2014 at 8:52

furkankatman

1,21014 silver badges24 bronze badges

1 Comment

furkankatman Over a year ago

it is so , but in case of large number of datas in use.

Collectives™ on Stack Overflow

AngularJS filter with integer comparison

3 Answers 3

Demo: http://plnkr.co/edit/uoynjdSI1ajrm02qp3v8?p=preview

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Demo: http://plnkr.co/edit/uoynjdSI1ajrm02qp3v8?p=preview

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related