Filtering with multiple checkboxes in angularJS

Question

I'm new to AngularJS. I wrote a program to filter the Item list when i check related check boxes. But here my CheckBoxes are behaving like "Radio" buttons. Anyway, program is working but it is not working with multiple check boxes. Please help me.

My Program @ http://plnkr.co/edit/iV7wyYoCNJdY1Ze7J6Pg?p=preview

Community · Accepted Answer · 2020-06-20 09:12:55Z

23

Easy way

I would Set different models for both check boxes and add filter like:

<body data-ng-controller="TestController">
        <table id="hotels">
            <tr>
                <th>Hotel Name</th>
                <th>Star Rating</th>
                <th>Hotel type</th>
                <th>Hotel Price</th>
            </tr>
            <tr data-ng-repeat="hotel in hotels | filter:search.type1 | filter:search.type2">
                <td>{{hotel.name}}</td>
                <td>{{hotel.star}}</td>
                <td>{{hotel.type}}</td>
                <td>{{hotel.price}}</td>
            </tr>
        </table>
        <br/>
        <h4>Filters</h4>
        <input type="checkbox" data-ng-model='search.type1' data-ng-true-value='luxury' data-ng-false-value='' /> Luxury &nbsp;&nbsp;&nbsp;
        <input type="checkbox" data-ng-model='search.type2' data-ng-true-value='double suite' data-ng-false-value='' /> Double suite
    </body>

Demo Plunker

Custom filter##

(_{I like it more})

We can bind the checkboxes to one object like:

$scope.types = {luxury: false, double_suite:false};

and after create custom filter like:

iApp.filter('myfilter', function() {
   return function( items, types) {
    var filtered = [];
    
    angular.forEach(items, function(item) {
       if(types.luxury == false && types.double_suite == false) {
          filtered.push(item);
        }
        else if(types.luxury == true && types.double_suite == false && item.type == 'luxury'){
          filtered.push(item);
        }
        else if(types.double_suite == true && types.luxury == false && item.type == 'double suite'){
          filtered.push(item);
        }
    });
  
    return filtered;
  };
});

So our HTML now seems simple:

 <body data-ng-controller="TestController">
        <table id="hotels">
            <tr>
                <th>Hotel Name</th>
                <th>Star Rating</th>
                <th>Hotel type</th>
                <th>Hotel Price</th>
            </tr>
            <tr data-ng-repeat="hotel in hotels |  myfilter:types">
                <td>{{hotel.name}}</td>
                <td>{{hotel.star}}</td>
                <td>{{hotel.type}}</td>
                <td>{{hotel.price}}</td>
            </tr>
        </table>
        <br/>
        <h4>Filters</h4>
        <input type="checkbox" data-ng-model='types.luxury'  /> Luxury &nbsp;&nbsp;&nbsp;
        <input type="checkbox" data-ng-model='types.double_suite'  /> Double suite
        <pre>{{types|json}}</pre>
    </body>

Demo 2 Plunker

[EDIT for @Mike]

If you interesting to invert the check-box filter, just add directive (grabbed from HERE):

iApp.directive('inverted', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) { return !val; });
      ngModel.$formatters.push(function(val) { return !val; });
    }
  };
});

sow new HTML form:

 <input type="checkbox" inverted data-ng-model='types.luxury'  /> Luxury &nbsp;&nbsp;&nbsp;
 <input type="checkbox" inverted data-ng-model='types.double_suite'  /> Double suite

Demo 3 Plunker

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 4, 2013 at 13:08

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

8 Comments

Hearaman Over a year ago

Tnx. Can we generate these models dynamically?

Mike Over a year ago

@MaximShoustin: how can it be made that so on selection of checkboxes the values display? and not otherwise

chris Frisina Over a year ago

@MaximShoustin none of these examples work as expected with both of the check boxes de/selected

Maxim Shoustin Over a year ago

@chrisFrisina witch browser do you use? i run Chrome, works as expected

chris Frisina Over a year ago

@MaximShoustin Chrome v 35.0.1916.114 No errors either in the console, even scoped to the plinker and not to the general page.

|

vincent T · Accepted Answer · 2014-08-28 11:01:24Z

1

If, like me you are not really familiar with custom filter and prefer a simpler solution, here is a simple example to bind data with ng-model of checkboxes in ng-repeat: tutorial here

It is a good example with ng-value-true and ng-value-false :

<div ng-repeat="fruit in fruits"> 
<input type="checkbox" ng-model="fruit.name" ng-true-value="{{fruit.name}}" ng-false-value="{{fruit-name}} - unchecked" ng-change="filterMultipleSystem()"/><br/> 
</div>

The Javscript function:

 $scope.filterMultipleSystem = function(){ 
    setTimeout(function () { 
    var x = document.getElementsByClassName("firstLoop"); 
    var i; for (i = 0; i < x.length; i++) { 

    if(x[i].title.indexOf("unchecked")!==-1){ 
    x[i].style.display = "none"; 
    } 

    else 
    x[i].style.display = "inherit"; }},10); }`;

edited Aug 28, 2014 at 11:01

answered Aug 27, 2014 at 13:41

vincent T

472 gold badges3 silver badges9 bronze badges

3 Comments

Chris Over a year ago

This is not a complete answer. Please include the source to filterMultipleSystem, which is not built into Angular.

vincent T Over a year ago

@Chris I have already put the link to a tutorial where this function is inside webtoutsaint.com/multiple_checkboxes . But I 'll edit my post with the function

Chris Over a year ago

I know that the information is in the site you linked, but Stack Overflow discourages link-only answers. Thanks for updating your answer!

Imants Volkovs · Accepted Answer · 2014-08-01 08:24:26Z

Here is bit refined filter(edited for my needs from @Maxim Shoustin) where you can select by multiple arguments. If u had 3 types and needed select 2 of 3, you can use this, cause other doesnt work on that(tried myself):

    app.filter('myfilter', function () {
    return function (items, types) {
        var filtered = [];
        for (var i in items)
        {

            if (types.found == true && items[i].type == 'Found') {
                filtered.push(items[i]);
            }                
            else if (types.notfound == true && items[i].type == 'Not found') {
                filtered.push(items[i]);
            }
            else if (types.moved == true && items[i].type == 'Moved') {
                filtered.push(items[i]);
            }
        }

        return filtered;
    };
});

Collectives™ on Stack Overflow

Filtering with multiple checkboxes in angularJS

3 Answers 3

Easy way

Custom filter##

8 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Easy way

Custom filter##

8 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related