Search code examples
htmlangularjsmeanjs

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


  • 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...


Solution

  • 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