1

I have a json wine list, and my wish is to build a code with AngularJS to filter the results

the json file

[
{ "name": "Wine a", "type": "red", "country": "france", "style": "strong" },
{ "name": "Wine a", "type": "white", "country": "italie", "style": "medium" },
{ "name": "Wine a", "type": "white", "country": "france", "style": "light" },
{ "name": "Wine a", "type": "rose", "country": "usa", "style": "strong" },
{ "name": "Wine a", "type": "champagne", "country": "chili", "style": "medium" },
{ "name": "Wine a", "type": "red", "country": "brazil", "style": "strong" },
{ "name": "Wine a", "type": "red", "country": "france", "style": "strong" }

]

the check-boxes

<div ng-controller="MainCtrl">
    <input ng-model="red" type="checkbox" >red</input>
    <input ng-model="white" type="checkbox" >white</input>
    <input ng-model="rose" type="checkbox" >rose</input>
    <input ng-model="champagne" type="checkbox" >champagne</input>

    <input ng-model="france" type="checkbox" >france/input>
    <input ng-model="italie" type="checkbox" >italie</input>
    <input ng-model="brazil" type="checkbox" >brazil</input>
    <input ng-model="chili" type="checkbox" >chili</input>

    <input ng-model="strong" type="checkbox" >strong</input>
    <input ng-model="medium" type="checkbox" >medium</input>
    <input ng-model="light" type="checkbox" >light</input>

</div>

my wish

My wish is to build a dynamic multi parameter filter list,the result of the list would match with the values of the check-boxes.

  • if i check red and strong, would appears in the list, only the wines from the json list with these parameter (a list of red and strong wines).

  • if i check red, white and france, would appears in the list, only the wines from the json list with these parameter ( a list of red and white wines from france).

i tried many solution, with no results. It seems to be hard to code!!

1 Answer 1

2

you can build custom filters for this and bind it with your filter checkboxes...

here is PLUNKER demo what I did for ony wine types...

first build a custom filter... here is mine winetype filter sample...

app.filter('winetypefilter', function () {
  return function(input, filter) {
    var result = [];
    angular.forEach(input, function (wine) {
        angular.forEach(filter, function (isfiltered, type) {
            if (isfiltered && type === wine.type) {
                result.push(wine);
            }
        });
    });
    return result;
  };
});

as you see it simply traverse wine array and filter out what you want...

after creating your filter just put it in your ng-repeat in your html...

<ul>
  <li ng-repeat="wine in wines | winetypefilter:winetypes">
    {{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
  </li>
</ul>

as you see our custom filter expect a parameter which is winetypes in example and it is a array of checkbox value in our controller and binded checkboxes in html code...

$scope.winetypes = {red : true,white : true,rose : true, champagne : true};

and here its html...

<li ng-repeat="(type, value) in winetypes">
  <input type="checkbox" ng-model="winetypes[type]" /> {{type}}
</li>

you can create other filters for other attribute or just put all of them into one filter it is your choice...

UPDATE

of course you can enable disable your filter dynamically... there can be many ways to do it simplest solution that comes to my mind is just sending third parameters as a boolean to check if filter is enable or not...

here is updated filter sample...

app.filter('winetypefilter', function () {
  return function(input, filter, isEnable) {
    // if isEnable then filter out wines
    if (isEnable) {
      var result = [];
      angular.forEach(input, function (wine) {
          angular.forEach(filter, function (isfiltered, type) {
              if (isfiltered && type === wine.type) {
                  result.push(wine);
              }
          });
      });
      return result;
    } 
    // otherwise just do not any filter just send input without changes
    else{
      return input
    }
  };
});

and here is updated PLUNKER...

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

9 Comments

WickY26, thanks a lot for you answer. Very nice solution!! Well explained. I 've created other filter for other attribute, is working fine!! Smart choice to let all the checkboxes checked, and to filter the results, uncheck them!! Thanks again!! It helps me a lot, because i spent hours trying to create this code with no success. With you help, i understand better AngularJs coding. Regards, Stéphane
Really it's a great community. I'm learning AngularJS, in the beginning it sound a little bit odd. But with your help, i understand much better. One question, it is possible do disable a filter with a checkbox. For example , now there are 2 filters, winetype and wine country. A checkbox linked to each filter could disable it?? Like in place of <li ng-repeat="wine in wines | winetypefilter:winetypes | countrypefilter:countrytypes"> would be <li ng-repeat="wine in wines | winetypefilter:winetypes">, if a function disable the country filter with a checkbox. Are you from Turkey?? Regards
@Stéphane sorry for late answer I was not around... I updated my solution you can check it... and yes I am from Turkey :D
@Stéphane for these kind of utilities if you do not need very specific code I strongly recommend using utility tool like lodash here is lodash filter document lodash.com/docs#filter . have a good week too :)
if you look at filter sample there is an if check at start which checks if filter is enable... so when you disable (isEnable is false) filter does not filter out anything and send array as it is... it is not related what is checked or unchecked because it is never looking filter parameters when first flag(isEnable) is false...
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.