angularjs - 如何在 angularjs ng-repeat 中创建大于和小于过滤器

Question

我正在尝试使用 angularjs 中的范围 slider 来过滤网格。我想要在我的 ng-repeat 中使用大于和小于过滤器。但我不知道如何做到这一点。我现在使用以下代码。但这对我不起作用。这段代码没有给我想要的输出

这是我的网格 html

<div class="col-md-3 product-left-grid" ng-repeat="data in Products| filter:priceSlider.max |filter:priceSlider.min">
    <div class="product-grid"></div>
    <div class="product-grid-text">
        <a href="javascript:void(0)">
            <img alt="" src="{{data.Picture1}}">
        </a>
        <div class="products-grid-info">
            <div class="price">
                <a class="btn btn-sm btn-width btn-default btn-font-weight" 
                   href="javascript:void(0)" 
                   ng-click="viewDetails($index)">Quick View</a>
                <a href="javascript:void(0)" 
                   class="btn btn-sm btn-width btn-default btn-font-weight" 
                   ng-click="addToCart (data.ProductID,data.Picture1,data.ProductName,data.UnitPrice,data.Discount,data.ShippingCharges,data.wieght)">Add to cart</a>
                <div class="tovar_description clearfix">
                    <a class="tovar_title" href="#"><b>{{data.ProductName}} </b> |  {{data.UnitPrice | currency:mycurrency}}</a>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
</div>

这是我的价格范围 slider

<rzslider rz-slider-floor="priceSlider.floor"
          rz-slider-ceil="priceSlider.ceil"
          rz-slider-model="priceSlider.min"
          rz-slider-high="priceSlider.max"
          rz-slider-on-change="onSliderChange()"></rzslider>

现在我正在使用过滤器，但我怀疑我在某个地方出错了。请高手帮忙解决这个问题。我需要像每个电子商务网站一样的价格范围过滤器。

谢谢

Answer 1

您必须制作一个自定义过滤器:

//create an angular filter named "price"
app.filter('price', function () {
    //our function will need three arguments 
    return function(items, greaterThan, lowerThan) { 
        //then we filter the array with dedicated ES5 method
        items = items.filter(function(item){
            //if item price is included between the two boundaries we return true
            return item.price > greaterThan && item.price < lowerThan;
        });

        //then we return the filtered items array
        return items;
    };
});

您可以看到 Array.filter() 的工作原理 here

我们的函数需要 3 个参数才能工作，即默认传递的项目列表以及我们将在 ng-repeat 过滤器中作为参数传递的下限和上限边界。

然后您可以按如下方式使用过滤器:

<div ng-repeat="data in Products | price:priceSlider.min:priceSlider.max | orderBy:'price'">...</div>

正如我上面所说，默认情况下会传递 items 数组，然后，要指定其他参数，您必须在过滤器名称后面用冒号 : 将它们分隔开。

您可以在官方文档here中阅读有关自定义过滤器的内容.

最后，您可以通过用竖线 | 分隔来指定任意数量的其他过滤器。
在我们的示例中，我在过滤数组后按价格对它们进行排序。

这是一个working JSFiddle .