Angularjs按價格搜索產品（從價格到價格）

Question

我正在嘗試添加過濾器，以便按from price to price搜索產品。 我在控制器中使用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>

在視圖中，我想添加兩個輸入字段，用於按價格搜索產品。

<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;
    }
}]);

Answer 2

在HTML中

 <li ng-repeat="product in products |rangePrice:
{'toPrice':to_price,'fromPrice':from_price}">

在JavaScript中

app.filter('rangePrice', function() {
    return function( items, rangePrice ) {
        var filteredValue= [];
        var toPrice= parseInt(rangePrice.toPrice);
        var fromPrice= parseInt(rangePrice.fromPrice);
        angular.forEach(items, function(item) {
            if( item.product_price>= toPrice&& item.product_price<= toPrice) {
                filteredValue.push(item);
            }
        });
        return filteredValue;
    };
});