1

I am trying to apply a price filter my ng-repeat. Currently the code filters the price only for an exact match; I need it filter to include every location that has that price.

My html looks like the following 

  <select id="maxPrice" ng-model="searchPrice" class="filterSelect">
      <option selected="">Max Price</option>
      <option>Free</option>
      <option>$1,000</option>
      <option>$2,000</option>
      <option>$3,000</option>
      <option>$5,000</option>
      <option>$8,000</option>
      <option>$13,000</option>
      <option>$21,000</option>
      <option>$34,000 </option>
    </select>

<div ng-repeat="school in diffSchools | filter:{Cost:searchPrice}" class="item">
  <p class="title">{{school.campName}}</p>
</div>

Currently this filters schools to return only exact matches on the number. The object it is searching looks like the following: 

{
    "campName": "Camp1",
    "Cost": ["$2,500-$12,000"],
}

How can I filter to include everything below and including the selected option's price?

I have examined the following couple of stack overflow questions, which discuss filtering using a fixed number (in one instance 0) or are quite different from my problem, especially for a non-expert angular user.

Community
  • 1
  • 1
maudulus
  • 10,627
  • 10
  • 78
  • 117
  • 1
    Check out the top answer here: http://stackoverflow.com/questions/24081004/angular-ng-repeat-filter-when-value-is-greater-than Let me know if you have trouble implementing it for your scenario. – ajliptak Jun 17 '15 at 21:13

1 Answers1

0

Add a filter to do this, example:

$scope.costBetween = function(item){
    var Cost = item.Cost[0].split("-"), 
    min = priceToInt(Cost[0]),
    max = priceToInt(Cost[1]);
    return $scope.searchPrice > min && $scope.searchPrice < max
};

<div ng-repeat="school in diffSchools | filter: costBetween" class="item">
    <p class="title">{{school.campName}}</p>
</div>

Demo

Walter Chapilliquen - wZVanG
  • 12,010
  • 8
  • 40
  • 64
  • I've used your code, which works (slightly modified), except that it runs the function before I've changed the select. I've implemented it in the html in the exact same way as you have it here. – maudulus Jun 17 '15 at 22:04