How to filter ng-repeat value on clicking of checkbox field in angularjs?

Question

• Hi, all I want to filter ng-repeat value on clicking of check box field.

• My Plunker.

• On clicking of Role block checkbox it's should filter only the roles value of block elements.

• And On clicking of My role check box it's should filter only the request_role value of Change agent data's or elements

My Html:-

 <div  ng-repeat="question in users | filter: searchtable | filter: myrole">
            <small>
              <table border="0">
                <tbody>
                  <th>{{question.displayName}}</th>
                <th style="background: yellow;">,{{question.roles[0]}}</th>
                <th style="background: light;">,{{question.request_role[0]}}</th>

                </tbody>
                      </table>


              </small>
        </div>

checkbox filter input :-

<input type="checkbox"  data-ng-model="searchtable.roles" value="block" ><span>Role block</span>

        <input type="checkbox"  data-ng-model="myrole.request_role" value="Change Agent" ><span>My role</span>

My Data:-

    $scope.users = [{
"_id": "59a6c7c96c2ce324124cc1d8",
"displayName": "blink foundation",
"provider": "local",
"location": "icf",
"username": "blink",
"dob": "1991-10-04T18:30:00.000Z",
"phone": 7299345250,
"religion": "Hindu",
"college_name": "Arignar Anna",
"__v": 2,
"created": "2017-08-30T14:12:25.397Z",
"roles": [
"block"
],
"request_role": [
"Change Agent"
],
"lastName": "foundation",
"firstName": "blink"
},
{
"_id": "598abfe4cce8ed582a2d8b32",
"displayName": "avinaash muthukumar",
"provider": "local",
"username": "avinaash muthu",
"__v": 0,
"created": "2017-08-09T07:55:16.511Z",
"roles": [
"admin"
],
"request_role": [],
"firstName": "avinaash"
},
{
"_id": "5979a591c999e9302caece13",
"displayName": "Ajmal Afthab",
"provider": "local",
"location": "Urapakkam",
"username": "ajmal_afthab",
"dob": "1995-01-23T18:30:00.000Z",
"phone": 9500269131,
"religion": "Islam",
"__v": 1,
"roles": [
"kp"
],
"request_role": [],
"categories": [
"Religion & Culture",
"Moral Ethics",
"Social Psychology"
],
"lastName": "Afthab",
"firstName": "Ajmal"
},
{
"_id": "5978a2886d5b10ec321a2114",
"displayName": "happy selvam",
"provider": "local",
"username": "happy",
"__v": 0,
"created": "2017-07-26T14:09:12.730Z",
"roles": [
"admin"
],
"request_role": [],
"categories": [],
"lastName": "selvam",
"firstName": "happy"
},
{
"_id": "58e73c5c9e2f3f1421e241be",
"displayName": "sarawana kumar",
"religion": "hindu",
"__v": 2,
"roles": [
"user"
],
"request_role": [],
"categories": [
"Religion & Culture",
"Social Psychology"
],
"lastName": "kumar",
"firstName": "sarawana"
},
{
"_id": "58d0fab62758cc482c295eba",
"displayName": "avinaash kumaran",
"provider": "local",
"username": "avinaash",
"roles": [
"admin"
],
"request_role": [],
"categories": [],
"lastName": "kumaran",
"firstName": "avinaash"
},
    ]

*My Plunker what I exactly looking is on clicking check box the ng-module value should filter in the list of data's...

Answer 1

You can do this in this way:

<input type="checkbox" ng-true-value="admin" ng-false-value=""  data-ng-model="filters.roles" ><span>Role block</span>   
<input type="checkbox" ng-true-value="Change Agent" ng-false-value=""  data-ng-model="filters.requestRoles" value="Change Agent" ><span>My role</span>

<div  ng-repeat="question in users | filter:{roles: filters.roles, request_role:filters.requestRoles}">
    <table border="0">
        <tbody>
            <th>{{question.displayName}}</th>
            <th style="background: yellow;">,{{question.roles[0]}}</th>
            <th style="background: light;">,{{question.request_role[0]}}</th>
        </tbody>
    </table>
</div>

You have to declare $scope.filters and fill with default values in the controller to make it work better.

Example: http://plnkr.co/edit/JMiSiIWf7B78rDtxws4R?p=preview

Other solution is to create Angular custom filter.

Answer 2

A more flexible solution will be to create a custom filter for your ng-repeat. The values from checkbox will be pushed into an array and filtering will be done based on these values. The filter is flexible as you can add more keys for filtering.

HTML:

<input type="checkbox" data-ng-model="searchtable.roles" value="block" ng-change="selectVal('block')"><span>Role block</span>
<input type="checkbox" data-ng-model="myrole.request_role" value="Change Agent" ng-change="selectVal('Change Agent')"><span>My role</span>
<div  ng-repeat="question in users| selectedTags:filterval">

JS:

$scope.filterval = [];
$scope.selectVal = function(val) {
    var index = $scope.filterval.indexOf(val);
    if (index > -1) $scope.filterval.splice(index, 1);
    else $scope.filterval.push(val);
}

Custom Filter:

app.filter('selectedTags', function() {
    return function(users, filterval) {
        if (filterval.length == 0) {
            return users;
        }
        var tempArr = [];
        angular.forEach(users, function(key, val) {
            tempArr.push(key);
        });
        return tempArr.filter(function(value) {
            //function to create filter for dynamic keys 
            function filterValue(parameter) {
                    for (var i in value[parameter]) {
                        if (filterval.indexOf(value[parameter][i]) != -1) {
                            return true;
                        }
                    }
                }
                //pass any key you want in your object 
                //If you want your object to be filtered based on either of the key
            if (filterValue('roles') || filterValue('request_role')) {
                return true;
            } else return false;
            //If you want your object to be filtered based on both of the key              
            /*          if(filterValue('roles') && filterValue('request_role')) {
                          return true;
                        }
                        else
                          return false; */
        });
    };
})

Working Plunker: http://plnkr.co/edit/XeFk0wn43IycRcOG0Arn?p=preview