angular multiple filters via ng-repeat

Question

I have list of objects with various properties. And list of objects that I should use as a filter.

  $scope.filters = [
    { title: "title1", options: [
        { text: "all", tags: ["1","2","3"] },
        { text: "1", tags: ["1"] },
        { text: "2", tags: ["2"] },
        { text: "3", tags: ["3"] }
      ]
    },
    { title: "title2", options: [
        { text: "all", tags: ["a","b","c"] },
        { text: "a", tags: ["a"] },
        { text: "b", tags: ["b"] },
        { text: "c", tags: ["c"] }
      ]
    }]
$scope.products = [
    { name: "foo", tags: ["1", "a","main"] },
    { name: "bar", tags: ["2", "b", "second"] },
    { name: "baz", tags: ["1", "c", "second"] },
    { name: "tap", tags: ["3", "c", "main"] }
  ]

I displayed filters as select elements.

 <div ng-repeat="filter in filters">
          <label for="filter">{{::filter.title}}</label>
          <select name="filter" ng-options="choice as choice.text for choice in filter.options track by choise.tags"></select>
        </div>

But how do I use filter here? http://plnkr.co/edit/S18xKkXPieWEBvMD3FqJ?p=preview

To make selected option available in main controller I can write ng-model="$parent.selectedOption" but it will be rewrited if any other select is changed and I'm not sure is that a right thing to tamper parent scope like so.

EDIT:

I want to filter products using a set of filters(defined via select).

For example:

select1 = "2"
select2 = "b"

Then filtered products should contain only those where tags property include that values from selects

Could you please elaborate yourself on what the expected result you are looking out for? — Shashank, Feb 29 '16 at 11:23
@Shashank, I want to apply all filters (values of selects) to list of products. — mef_, Feb 29 '16 at 11:25
so when you select something from 'title1', then productList should display something and it should also trigger on every change of the `select`. Is that correct? — Shashank, Feb 29 '16 at 11:30
Yes. I want to filter productList on every change of every select — mef_, Feb 29 '16 at 11:31

score 1 · Accepted Answer · answered Feb 29 '16 at 12:31

I have updated the plnkr to display the product based on the value selected in dropdown. I've also made few changes in js variable to achieve this. But it should give you an idea of implementing this. Hope it helps. http://plnkr.co/edit/i0edlLRkIpmgW3fNyKsN?p=preview

    // Code goes here
    var app = angular.module("myApp", []);
    
    
    app.controller("MainCtrl", function ($scope) {
      $scope.filters = [
        { title: "type", filterBy: "all",  options: [
            { text: "all", tags: ["1","2","3"] },
            { text: "1", tags: ["1"] },
            { text: "2", tags: ["2"] },
            { text: "3", tags: ["3"] }
          ]
        },
        { title: "condition", filterBy: "all", options: [
            { text: "all", tags: ["a","b","c"] },
            { text: "a", tags: ["a"] },
            { text: "b", tags: ["b"] },
            { text: "c", tags: ["c"] }
          ]
        },
        { title: "group", filterBy: "all", options: [
            { text: "all", tags: ["main","second"] },
            { text: "main", tags: ["main"] },
            { text: "second", tags: ["second"] }
          ]
        }
      ];
      
      $scope.products = [
        { name: "foo", type: "1", condition: "a", group: "main"},
        { name: "bar", type: "2", condition: "b", group: "second"},
        { name: "baz", type: "1", condition: "c", group: "second"},
        { name: "tap", type: "3", condition: "c", group: "main"}
      ];
      
      $scope.filterProduct = function(product) {
        var isValid = true;
        angular.forEach($scope.filters, function(filter){
          if(!(filter.filterBy === "all" || filter.filterBy === product[filter.title])) {
            isValid = false;
          }
        });
        
        return isValid;
        
      }
      
    });

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="MainCtrl">
      <div>
        <h2>filters: </h2>
        <div ng-repeat="filter in filters">
          <label for="filter">{{filter.title}}</label>
          <select name="filter" ng-model="filter.filterBy">
            <option ng-repeat="option in filter.options" value="{{option.text}}">{{option.text}}</option>
          </select>
        </div>
      </div>
      <div>
        <h2>data: </h2>
        <ul ng-repeat="product in products |  filter:filterProduct">
          <li>{{::product.name}}</li>
        </ul>
      </div>
    </div>
  </body>

</html>

Almost exactly what I'm looking for. However, requirements changed a little bit so a made a little modification on filter algorithm according to a question here http://stackoverflow.com/questions/16312528/check-if-an-array-contains-any-elements-in-another-array-in-javascript. I need to to compare inclusion of any elements of an array inside target array. — mef_, Mar 02 '16 at 07:40

angular multiple filters via ng-repeat

1 Answers1