javascript - Angularjs按价格搜索产品(从价格到价格)

Question

我正在尝试添加过滤器以按从价格到价格 搜索产品。我在 Controller 中有以下 json 格式的数组作为 $scope.products。

[
  {"product_id":"1","product_price":"185"},
  {"product_id":"2","product_price":"45"},
  {"product_id":"3","product_price":"123"},
  {"product_id":"4","product_price":"23"},
  {"product_id":"5","product_price":"776"}
]

下面是html中的循环

<ul class="items">
  <li ng-repeat="product in products | filter:{product_name: findname} | sizeFilter:(size_arr|filter:{on:true})" >
    <strong>{{product.product_name | CapsFirst}}</strong> 
    <strong>({{product.product_category}})</strong>
    <strong>({{product.product_size}})</strong>
    <strong>({{product.product_color}})</strong>
  </li>
</ul>

在 View 中，我想添加两个输入字段以按价格搜索产品。

<input type="number" ng-model="from_price" /> 
<input type="number" ng-model="to_price" /> 

任何人都可以指导我如何以正确的方式发展。我已经搜索过但找不到教程，我不是 angularjs 的专家。谢谢...

Answer 1

这是一个关于 plunkr 的示例，说明您一直在要求什么。为了区分它们，我添加了一个产品名称，试试吧。

https://plnkr.co/edit/NKos4x9eeB5dZQaypurg?p=preview

app.filter('sizeFilter', [function() {
    return function(values, config) {
      if (config.enabled) {
        var filterResult = [];
        angular.forEach(values, function(value) {
          if (value.product_price >= config.from_price && value.product_price <= config.to_price) {
            filterResult.push(value);
          };
        });
        return filterResult;
      }
      return values;
    }
}]);