I have a list of products generated from a third party JSON feed, the prices will vary depending on the current price from the 3rd party.
How can I only display prices on the page below for a certain value, such as below £10.00?
I assume AngularJS filters will come into play here but now sure how it works with an expression such as item.products_price, but even better if a slider or something is also possible. So products are displayed below based on the value range in a slider.
Here is my 'List' code:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<ion-content class="has-subheader">
<ion-list>
<ion-item ng-repeat="item in products | filter:query" class="item-thumbnail-left item-text-wrap">
<img ng-src="img/{{item.products_image}}" alt="{{item.products_name}} Photo">
<h2>{{item.products_name}}</h2>
<h3>{{item.products_model}}</h3>
<p>{{item.products_price}}</p>
</ion-item>
</ion-list>
</ion-content>
</html>
What you want to do is write a custom filter. Here is one way you might structure the filter:
.filter('valueRange', function() {
return function(productList, minValue, maxValue) {
// make sure something was passed - you can decide if you want to use defaults
if(!productList || !minValue || !maxValue) {
return productList;
}
var out = [];
angular.forEach(productList, function(product) {
if(product.products_price >= minValue && product.products_price <= maxValue) {
out.push(product);
}
});
return out;
}
});
Then you can use it in your ng-repeat as:
<ion-item ng-repeat="item in products | valueRange:minValue:maxValue" class="item-thumbnail-left item-text-wrap">
This part - valueRange:minValue:maxValue - will call the valueRange filter, pass in products as the first parameter, minValue as the second parameter and maxValue as the third parameter. You can get these values from your slider.