使用 Angular 过滤器仅显示 10 英镑以下的商品

Question

我有一份从第三方 JSON Feed 生成的产品列表，价格会根据第三方的当前价格而有所不同。

如何才能在下面的页面上只显示特定值的价格，例如低于 10.00 英镑？

我假设 AngularJS 过滤器将在这里发挥作用，但现在确定它如何与 item.products_price 等表达式一起使用，但如果滑块或其他东西也是可能的，那就更好了。因此，产品会根据滑块中的值范围显示在下方。

这是我的 'List' 代码：

    <!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

Answer 1

您想做的是编写自定义过滤器。以下是构建过滤器的一种方式：

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

然后您可以在您的 ng-repeat 中使用它：

<ion-item ng-repeat="item in products | valueRange:minValue:maxValue" class="item-thumbnail-left item-text-wrap">

这部分 - valueRange:minValue:maxValue - 将调用 valueRange 过滤器，传入 products 作为第一个参数， minValue 作为第二个参数， maxValue 作为第三个参数。您可以从滑块中获取这些值。

Answer 2

你为什么不试试

ng-if="item.products_price<10"

或

ng-show="item.products_price<10"

使用 Angular 过滤器仅显示 10 英镑以下的商品

Only display items below £10 with Angular Filter

javascript

angularjs

angularjs-ng-repeat

angular-filters