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
– tanmay, Commented Jan 24, 2017 at 6: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
– lex82, Commented Jan 24, 2017 at 8:08
This might help you with the checkboxes stackoverflow.com/questions/14514461/… — lex82
– lex82, Commented Jan 24, 2017 at 8: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
– Loura, Commented Jan 24, 2017 at 8:34

Shaishab Roy · Accepted Answer · 2017-01-24 08:11:03Z

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

Collectives™ on Stack Overflow

filter multiple checkbox angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related