how to create greater than and less than filter in angularjs ng-repeat

Question

I am trying to use range slider in angularjs to filter the grid. I want a greater than and less than filter in my ng-repeat. But I am not getting how to do this. I am using the following code for now. But this is not working for me. This code is not giving me desired output

Here is my html for grid

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

this is my price range 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>

Now I am using filter but I have doubt that I am going wrong somewhere. Please experts help to solve this problem. Price range filter I need like every eCommerce website have.

Thanks

i am trying but its not working can u please refer me a working example — Azad Chouhan
– Azad Chouhan, Commented Aug 22, 2015 at 21:57

Freezystem · Accepted Answer · 2016-06-06 08:17:22Z

5

You have to make a custom filter :

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

You can see how Array.filter() works here

Our function will need 3 arguments to work, the items list which is passed by default and the lower and higher boundaries that we will pass as arguments in our ng-repeat filter.

Then you can use the filter as follow :

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

As I said above, items array is passed by default, then, to specify other parameters you have to separate them with a colon : right after the filter name.

You can read about custom filters in the official documentation here.

Finally you can then specified as many other filters as you want by separating them with a pipe |.
In our example I'm ordering them by price after the array has been filtered.

Here is a working JSFiddle.

edited Jun 6, 2016 at 8:17

answered Aug 22, 2015 at 23:38

Freezystem

4,8831 gold badge37 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Freezystem Over a year ago

Is that answer useful to you ? You don't have made any feedback. Do you need some explanation ?

Collectives™ on Stack Overflow

how to create greater than and less than filter in angularjs ng-repeat

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related