filter multiple checkbox angular

Question

I am trying to filter my results on multiple checkboxes.

How do i write dynamic ng-model for the checkboxes for the filter to take reflect?

function MainCtrl($scope) {
     $scope.languages = [
        { name: 'persian', _id : 0 },
        { name: 'English', _id : 1 },
        { name: 'spanish', _id : 2 } 
      ];
    $scope.bu = [
        { name: 'A', _id : 1 },
        { name: 'B', _id : 2 },
        { name: 'C', _id : 3 },
        { name: 'D', _id : 4 },
        { name: 'E', _id : 5 }
      ];
    
    $scope.array = [
  {   
    "id": 910,   
    "language": {
      "_id": "333",
      "name": "Persian",
      "abbreviation": "PE"
    },
    "business_unit": {
      "_id": "2",
      "name": "B"
    }
  },
  {    
    "id": 909,   
    "language": {
      "_id": "456",
      "name": "English",
      "abbreviation": "EN"
    },
    "business_unit": {
      "_id": "3",
      "name": "C"
    }
  },
  {    
    "id": 908,   
    "language": {
      "_id": "456",
      "name": "Spanish",
      "abbreviation": "SP"
    },
    "business_unit": {
      "_id": "4",
      "name": "D"
    }
  },
  {    
    "id": 911,   
    "language": {
      "_id": "343",
      "name": "German",
      "abbreviation": "GE"
    },
    "business_unit": {
      "_id": "5",
      "name": "E"
    }
  },
  {    
    "id": 912,   
    "language": {
      "_id": "696",
      "name": "Russian",
      "abbreviation": "RU"
    },
    "business_unit": {
      "_id": "1",
      "name": "A"
    }
  }]
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <div ng-controller="MainCtrl">
    
    
    
    
   <li ng-repeat="o in languages" ng-model="lang.language.name">
      <input type="checkbox">
      {{o.name}},
  `</li>
  
   <br><br><br>
   <li ng-repeat="o in bu">
      <input type="checkbox" ng-model="bu.business_unit.name">
      {{o.name}},
  `</li>
  
  <br><br><br>
  <div ng-repeat="arr in array filter : lang | filter : bu">
      {{arr.language.name}} "and" {{arr.business_unit.name}}
  </div>
  
<div>

I don't think you can do this without writing custom filter AFAIK. Had it been a case where you can select only one language, it was possible with built-in filters. — tanmay, Jan 24 '17 at 06:31
I'd be happy to help you, but please clarify your question. Is the problem to bind the checkboxes to arrays/objects containing the selected values (doesn't seem to work) or is it only the filtering step which is independent of how the values are selected. If both, you can create two separate shorter questions. If only one, please leave out the irrelevant part and shorten your question. — lex82, Jan 24 '17 at 08:08
This might help you with the checkboxes http://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs — lex82, Jan 24 '17 at 08:10
@lex82 thanks for your time. Not specfiic to angular 1.0.3.. and this question is actually filtering the main result based on checkboxes present on two lists.. any one and both list should work. — Loura, Jan 24 '17 at 08:34

score 3 · Accepted Answer · answered Jan 24 '17 at 08:11

You can use custom filter to achieve your goal:

custom fileter:

filter('myFilter', function() {
  return function(items, search) {
    var filterItems = {
      search: search,
      result: []
    };

    if (!search.needFilter) {
      return items;
    }

    angular.forEach(items, function(value, key) {
      if (this.search.language[value.language.name] === true || this.search.business_unit[value.business_unit.name] === true) {
        this.result.push(value);
      }
    }, filterItems);
    return filterItems.result;
  };
})

HTML:

<p>Search by Language:</p>
  <li ng-repeat="o in languages">
    <input type="checkbox" ng-model="search.language[o.name]"> {{o.name}}
  </li>

  <p>Search by Unit:</p>
  <li ng-repeat="o in bu">
    <input type="checkbox" ng-model="search.business_unit[o.name]"> {{o.name}}
  </li>

  <p><b>Result:</b></p>
  <div ng-repeat="arr in array  | myFilter : search:false ">
    {{arr.language.name}} "and" {{arr.business_unit.name}}
  </div>

For more details see PLUNKER DEMO

filter multiple checkbox angular

1 Answers1