AngularJS dynamic list of filters

Question

I have a list of products. Each product has three properties: mustBuy, promotion (both booleans) and productName. What I'm trying to do is to apply one filter at the time, based on the user input. If the user clicks on a button called "Must buy", the products will be filtered by the mustBuy field, so once I click that button I should only see the products that have a mustBuy property with a value of true. I want to generate those filter buttons in a dynamic manner because I might add extra properties later on. Right now I have a list of hard coded buttons used for filtering:

        <a ng-click="myFilter = {mustBuy:true}">
            <img src="/images/must-filter.png" />
        </a>
        <a ng-click="myFilter = {promotion:true}">
            <img src="/images/promo-filter.png" />
        </a>

This is what "myFilter" filters.

<div ng-repeat="product in products | filter:myFilter">...</div>

It works fine but I want to make those filters dynamic as I'll add more in the future. This is what I've tried: (v1): Js controller:

        $scope.filters = [{ image: "must-filter.png", myFilter: { mustBuy: true } }, { image: "promo-filter.png", myFilter: { promotion: true } }];

Html:

        <a ng-repeat="f in filters | filter:f.myFilter">
            <img src="/images/{{f.image}}" />
        </a>

(v2): Js controller:

        $scope.filters = [{ image: "must-filter.png", myFilter: { mustBuy:true } }, { image: "promo-filter.png",  myFilter: {promotion:true} }];

Html:

        <a ng-repeat="f in filters"
           ng-click="{{f.myFilter}}">
            <img src="/images/{{f.image}}" />
        </a>

(v3):

Js controller:

       $scope.filters = [{ image: "must-filter.png", myFilter: "myFilter = {mustBuy:true}" }, { image: "promo-filter.png",  myFilter: "myFilter = {promotion:true}" }];

Html:

        <a ng-repeat="f in filters"
           ng-click="{{f.myFilter}}">
            <img src="/images/{{f.image}}" />
        </a>

The third approach (v3) has EXACTLY the same HTML output the original (hardcoded) approach had, except it doesn't work, which makes me think there is something more (binding) happening behind the scenes? How can I achieve the functionality described in the first paragraph?

Yes, there is... Now, the question ?

gkalpak
– gkalpak

2014-04-24 13:11:24 +00:00
Commented Apr 24, 2014 at 13:11 — gkalpak
– gkalpak, Commented Apr 24, 2014 at 13:11
I rephrased the question to make it more clear. Thank you.

Toonsylvania
– Toonsylvania

2014-04-24 15:07:58 +00:00
Commented Apr 24, 2014 at 15:07 — Toonsylvania
– Toonsylvania, Commented Apr 24, 2014 at 15:07

gkalpak · Accepted Answer · 2014-04-24 15:53:55Z

4

Without looking too much (read at all) why your attempts failed, you can achieve what you want like this:

1.)
Define a list of filters and the currently selected (applied) filter in the contoller:

$scope.filters = [
    {name: 'none',      filterExpr: ''},
    {name: 'must buy',  filterExpr: {mustBuy: true}},
    {name: 'promotion', filterExpr: {promotion: true}}
];
$scope.selectedFilter = $scope.filters[0];

_{(My filter-object have a name and a filterExpr, but you can adjust them to your needs.)}

2.)
Define a function for changing the applied filter (again in the contoller of course):

$scope.setFilter = function (filter) {
    $scope.selectedFilter = filter;
};

3.)
Let the user change the applied filter (in the view):

<ul>
    <li ng-repeat="filter in filters">
        <a href="" ng-click="setFilter(filter)">{{filter.name}}</a>
    </li>
</ul>

4.)
Filter the items, based on the currently selected filter's filter-expression:

<ul>
    <li ng-repeat="item in items | filter:selectedFilter.filterExpr">
        {{item.description}}
    </li>
</ul>

See, also, this short demo.

edited Apr 24, 2014 at 15:53

answered Apr 24, 2014 at 15:43

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

1 Comment

Toonsylvania Over a year ago

Thank you! So I would've had to use a function after all. Very simple and elegant solution by the way.

Cem Özer · Accepted Answer · 2014-04-24 13:33:02Z

0

As you can see in this FIDDLE, you must use a function or custom filter to chain your dynamic filters.

Filter set:

//this set will filter everything but true-false
$scope.set1 = [function(item){return item.mustBuy;},
               function(item){return !item.promotion}];

Filter function:

$scope.multipleFilters = function(item){
    var v = true;
    for(var i=0; i<$scope.set1.length; i++){
        v = v && $scope.set1[i](item);
    }
    return v;
};

Use like this:

<div ng-repeat="product in products | filter:multipleFilters">
    {{product.mustBuy}} - {{product.promotion}}
</div>

The point is using functions for filters like function(item){return item.mustBuy}, not expressions like {mustBuy:true}

answered Apr 24, 2014 at 13:33

Cem Özer

1,28312 silver badges19 bronze badges

1 Comment

Toonsylvania Over a year ago

Thanks for answering! I think I didn't express myself properly, I will modify the original question to make it more clear. What I'm trying to do is to apply one filter at the time, based on the user input. If the user clicks on a button called "Must buy", the products will be filtered by the mustBuy field. So I will only see the products that have a mustBuy property with a value of true. While trying to simplify the example and the code sample, I omitted other fields (such as product name, product image etc).

Collectives™ on Stack Overflow

AngularJS dynamic list of filters

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related