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

Vivz · Accepted Answer · 2017-08-31 09:34:49Z

1

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

edited Aug 31, 2017 at 9:34

answered Aug 31, 2017 at 9:26

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vivz Over a year ago

The above answer will work with checkbox too as you can see from the demo.

R. Mani Selvam Over a year ago

Yes, I saw your answer this is also useful to me thanks, i give you upvote for this ....thanks.... and if possible please look at this :- stackoverflow.com/questions/45959394/…

Karol T · Accepted Answer · 2017-08-31 09:06:54Z

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.

edited Aug 31, 2017 at 9:06

answered Aug 31, 2017 at 9:00

Karol T

1,1461 gold badge11 silver badges17 bronze badges

2 Comments

R. Mani Selvam Over a year ago

@karol thanks for your valuable answer if possible please update my plunker as well to know the exact solution thanks

R. Mani Selvam Over a year ago

@karol thanks for your answer your code does not work in my portal, and I have found the answer I just changed type checkbox instead of radio it's working to me perfectly thanks....thank you so much for your help...

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related