Only display items below £10 with Angular Filter

Question

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>

http://plnkr.co/edit/lV5GUPkU9EWUiedHuA1l

An angular filter is code used to format an object as text. Example: there are date filters which can format a date object in various ways so they show in a specific way on the screen. It has nothing to do with filtering out values. You should build a method into your angular Controller that retrieves a subset of your array based on some input like amount. You can then call this in your `ng-repeat` attribute. Example: `ng-repeat="item in getProductsBelow(10)"` and create a function with the same name that returns those products that are below the input. — Igor, Jun 28 '16 at 14:09
I think the answer to this question should help you: http://stackoverflow.com/questions/23728666/angularjs-filtering-between-a-range — Jens Eeckhout, Jun 28 '16 at 14:11
@Igor That's not entirely true. You can create a custom `.filter()` in Angular that takes inputs to perform filtering on a list returning an array containing only those items that meet your filter criteria. This is more advantageous than writing a controller method because you can reuse this filter throughout your app without having to write the code in a bunch of different controllers. — Lex, Jun 28 '16 at 14:36

score 0 · Accepted Answer · answered Jun 28 '16 at 14:51

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.

score 0 · Answer 2 · answered Jun 28 '16 at 16:50

0

why don't you try

ng-if="item.products_price<10"

or

ng-show="item.products_price<10"

answered Jun 28 '16 at 16:50

Sa E Chowdary

2,075
15
31

Only display items below £10 with Angular Filter

2 Answers2