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
– Shashank, Commented Feb 29, 2016 at 11:23
@Shashank, I want to apply all filters (values of selects) to list of products. — mef_
– mef_, Commented Feb 29, 2016 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
– Shashank, Commented Feb 29, 2016 at 11:30
Yes. I want to filter productList on every change of every select — mef_
– mef_, Commented Feb 29, 2016 at 11:31

Narendra CM · Accepted Answer · 2016-02-29 12:31:24Z

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="[email protected]" 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 stackoverflow.com/questions/16312528/…. I need to to compare inclusion of any elements of an array inside target array.

Collectives™ on Stack Overflow

angular multiple filters via ng-repeat

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related