小编Fre*_*tem的帖子

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

我正在尝试在 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>
Run Code Online (Sandbox Code Playgroud)

这是我的价格范围滑块

<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>
Run Code Online (Sandbox Code Playgroud)

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

谢谢

slider angularjs

2
推荐指数
1
解决办法
7290
查看次数

标签 统计

angularjs ×1

slider ×1