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

Question

我正在尝试在 angularjs 中使用范围滑块来过滤网格。我想在我的 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>

这是我的价格范围滑块

<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()工作原理

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

然后你可以使用过滤器如下：

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

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

您可以在此处的官方文档中阅读有关自定义过滤器的信息。

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

这是一个有效的 JSFiddle。