How to invoke custom filter manually?

Question

<div "ng-repeat="phone in phoneList| filter:filterPrice">



//custome filter
 $scope.filterPrice = function (phone) {
        return (phone.price > MIN_VAL && phone.price < MAX_VAL);};

MAX_VAL and MIN_VAL are input values which I am getting from input, I have to update the phoneList as MAX_VAL or MIN_VAL changes. I am getting the event of values getting changed but how do I update in list?

Answer 1

You can use a filter for this passing user entered minValue and maxValue to filter.

<li ng-repeat="phone in phoneList | filterPrice:maxValue:minValue">
     {{ phone }}
</li>

Send the list you want to filter from as 1st param, then minValue, maxValue based on the order you have passed then from HTML template. Once you filter you can return a new list.

app.filter('filterPrice', function() {
  return function(phoneList, maxValue, minValue) {
    // You can refine this logic
    if(!maxValue && !minValue)
    return phoneList;
    var filtered = [];
    filtered = phoneList.filter(function(obj){
      if(maxValue && !minValue){
        return obj.price <= maxValue;
      } else if(!maxValue && minValue){
        return obj.price >= minValue;
      }
      return (obj.price >= minValue && obj.price <= maxValue )
    })
    return filtered;
  };
});

Plunker