current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 7 down vote favorite
5

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

share|improve this question
up vote 20 down vote accepted

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

share|improve this answer
    
Tnx. Can we generate these models dynamically? – Hearaman Nov 4 '13 at 13:30
    
I'll edit my post, hope it will help – Maxim Shoustin Nov 4 '13 at 13:51
    
@MaximShoustin: how can it be made that so on selection of checkboxes the values display? and not otherwise – Mike Apr 26 '14 at 19:18
    
@Mike see edit at the end. good luck – Maxim Shoustin Apr 26 '14 at 20:43
    
@MaximShoustin none of these examples work as expected with both of the check boxes de/selected – chris Frisina Jun 5 '14 at 13:11
up vote 1 down vote

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); }`;
share|improve this answer
    
This is not a complete answer. Please include the source to filterMultipleSystem, which is not built into Angular. – Chris Aug 27 '14 at 22:12
    
@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 – vincent T Aug 28 '14 at 10:49
    
I know that the information is in the site you linked, but Stack Overflow discourages link-only answers. Thanks for updating your answer! – Chris Aug 28 '14 at 12:02
up vote 0 down vote

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;
    };
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.