AngularJS End User Filter multiple values

Question

I am trying to create a shop like site where there is a filter option for products. I need the filter to be able to have more than one option selected, and show all the items that contain the selections. Example, checkbox for food is selected, and for furniture, show all products of type food and furniture. If none of these are selected, then show all product types.

I have a JSFiddle that is half working. It will filter down a checkbox, but as soon as a second one is selected, it shows no results. http://jsfiddle.net/ellenburgweb/om58sdbd/8/

<div ng-app ng-controller="Main">
<input type='checkbox' ng-model='filterFood' ng-true-value="Food" ng-false-value="" />Food
<br />
<input type='checkbox' ng-model='filterFurniture' ng-true-value="Furniture" ng-false-value="" />Furniture
<br />
<input type='checkbox' ng-model='filterFences' ng-true-value="Fences" ng-false-value="" />Fences
<br />
    <hr />
<div ng-repeat="product in products | filter:search | filter:filterFood | filter:filterFurniture | filter:filterFences">
{{product.name}} | {{product.type}}</div>

</div>
<script>
        function Main($scope){
            $scope.products = [{name: 'Product One', type: 'Food'},
                    {name: 'Product Two', type: 'Furniture'},
                    {name: 'Product Three', type: 'Fences'},
                    {name: 'Product Four', type: 'Food'},
                    {name: 'Product Five', type: 'Furniture'},
                    {name: 'Product Six', type: 'Fences'}];
        }  
</script>

I have seen other similar questions, and the answers to them are much like this one: How to filter multiple values (OR operation) in angularJS with checkbox

That method will not work for me. I need all the products to be showing to begin with, and filter out what is not selected.

Mike Feltman · Accepted Answer · 2017-06-15 20:10:18Z

1

Forked fiddle here: http://jsfiddle.net/85dobcum/

This should do it for you:

<div ng-app ng-controller="Main">
    <input type='checkbox' ng-model='Food' ng-true-value="Food" ng-false-value="" />Food
    <br />
    <input type='checkbox' ng-model='Furniture' ng-true-value="Furniture" ng-false-value="" />Furniture
    <br />
    <input type='checkbox' ng-model='Fences' ng-true-value="Fences" ng-false-value="" />Fences
    <br />
    <hr />
    <div ng-repeat="product in products | filter:search | filter: productType">
    {{product.name}} | {{product.type}}
    </div>
</div>

function Main($scope){
    $scope.products = [{name: 'Product One', type: 'Food'},
                    {name: 'Product Two', type: 'Furniture'},
                    {name: 'Product Three', type: 'Fences'},
                    {name: 'Product Four', type: 'Food'},
                    {name: 'Product Five', type: 'Furniture'},
                    {name: 'Product Six', type: 'Fences'}];

    $scope.productType = function(product)  {
         var filters = []
         filters.push($scope.Food)
         filters.push($scope.Furniture)
         filters.push($scope.Fences)
         if (filters.toString().length <=4) {return true} 
         else {return filters.indexOf(product.type)>-1 }
    }
}

answered Jun 15, 2017 at 20:10

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

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

3 Comments

David Ellenburg Over a year ago

Thats perfect. Thanks!

David Ellenburg Over a year ago

Is there any way to make this not strict? For instance, a product has more than one type, separated by a comma.

Mike Feltman Over a year ago

Sure. Too complicated for comments. I'd open up a new question starting with the answer above and revised $scope.products to show multiple types.

Collectives™ on Stack Overflow

AngularJS End User Filter multiple values

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related