[英]Angularjs search product by price (from price to price)
I'm trying to add filter for searching the product by from price to price
. 我正在尝试添加过滤器,以便按
from price to price
搜索产品。 I have following array in json format as $scope.products
in the 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"}
]
And below is the loop in html 以下是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>
In the view I want to add two input fields for searching the products by price. 在视图中,我想添加两个输入字段,用于按价格搜索产品。
<input type="number" ng-model="from_price" />
<input type="number" ng-model="to_price" />
Can anyone guide me that I can develop in proper way. 任何人都可以指导我,我可以以适当的方式发展。 I've searched about it but couldn't found a tutorial, I'm not expertise in angularjs.
我搜索过它但找不到教程,我不是angularjs的专长。 Thank You...
谢谢...
Here's an example on plunkr of what you've been asking for. 这里有一个关于你一直要求的plunkr的例子。 I have added a product name in order to distinguish them, try it.
我添加了产品名称以区分它们,试一试。
https://plnkr.co/edit/NKos4x9eeB5dZQaypurg?p=preview 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;
}
}]);
In HTML 在HTML中
<li ng-repeat="product in products |rangePrice:
{'toPrice':to_price,'fromPrice':from_price}">
In JavaScript 在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;
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.