angularJs filter on single column with different value based on checkbox selection

Question

I have one json dataset in angular say

$scope.data = [{
      call_id: '1',
      title: 'test',
      start: new Date(elem.call_date),
      backgroundColor: "#9f1eab",
      borderColor: "#9f1eab",
      filterByCheckbox: 'filterOne'},
    {
      call_id: '1',
      title: 'test',
      start: new Date(elem.call_date),
      backgroundColor: "#9f1eab",
      borderColor: "#9f1eab",
      filterByCheckbox: 'filterTwo'
    }];

Now I have 3 checkox

 filterOne
 filterTwo
 filterThree

Now I want to filter $scope.data based on above 3 checkbox selection. Column to filter in $scope.data is filterByCheckbox

So above is my data set which contains list of records having column filterByCheckbox I want to filter data based on that column.

If first 2 checkbox checked,$scope.data should be filtered on column filterByCheckbox containing filterOne and filterTwo value.

How can i achieve this in angularjs?

I have tried:

$filter('filter')($scope.data, { filterByCheckbox: 'filterTwo' })

But it works for only one checkbox.

you need to share your code for `$scope.data` and what you have done so far — tanmay, Apr 04 '17 at 07:03
Possible duplicate of [How to filter multiple values (OR operation) in angularJS](http://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs) — Martin, Apr 04 '17 at 07:11

score 1 · Answer 1 · answered Apr 04 '17 at 07:39

$scope.filterdData=[];   
angular.forEach($scope.data,function (val,key){
    if(($scope.filterOne && val.filterByCheckbox==='filterOne')||($scope.filterTwo && val.filterByCheckbox==='filterTwo')||($scope.filterThree && val.filterByCheckbox==='filterThree')){
    $scope.filterdData.push(val);
    }  
});

score 1 · Answer 2 · answered Apr 04 '17 at 08:15

I would solve it using ngTrueValue and ngFalseValue. They are basically the value to which the expression should be set when checked and unchecked respectively.

So, your checkboxes would look like this:

<input type="checkbox" data-ng-model='search.filterOne' 
       data-ng-true-value="'filterOne'" data-ng-false-value='' />filterOne

Now, all we need to do is use those as filter. Like this:

<div ng-repeat="item in data | filter: search.filterOne | filter: search.filterTwo">
  <pre>{{item.filterByCheckbox}}</pre>
  ...
</div>

Find working example below!

var app = angular.module("myApp", []);

app.controller("appCtrl", function($scope) {

  $scope.search = []

  $scope.data = [{
    call_id: '1',
    title: 'test',
    start: new Date(),
    backgroundColor: "#9f1eab",
    borderColor: "#9f1eab",
    filterByCheckbox: 'filterOne'
  }, {
    call_id: '1',
    title: 'test',
    start: new Date(),
    backgroundColor: "#9f1eab",
    borderColor: "#9f1eab",
    filterByCheckbox: 'filterTwo'
  }];
});

<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-controller="appCtrl">
  <input type="checkbox" data-ng-model='search.filterOne' data-ng-true-value="'filterOne'" data-ng-false-value='' />filterOne
  <br>
  <input type="checkbox" ng-model="search.filterTwo" data-ng-true-value="'filterTwo'" data-ng-false-value=''/>filterTwo
  <div ng-repeat="item in data | filter: search.filterOne | filter: search.filterTwo">
    <pre>{{item.filterByCheckbox}}</pre>
  </div>
</body>

</html>

angularJs filter on single column with different value based on checkbox selection

2 Answers2