build a dynamic multi parameter filter list with AngularJS

问题

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:

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

来源：https://stackoverflow.com/questions/24107781/build-a-dynamic-multi-parameter-filter-list-with-angularjs

标签

json

angularjs

checkbox

filter