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.

Solution 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:

<inputtype="checkbox"data-ng-model="searchtable.roles"value="block"ng-change="selectVal('block')"><span>Role block</span><inputtype="checkbox"data-ng-model="myrole.request_role"value="Change Agent"ng-change="selectVal('Change Agent')"><span>My role</span><divng-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() {
    returnfunction(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 functionfilterValue(parameter) {
                    for (var i in value[parameter]) {
                        if (filterval.indexOf(value[parameter][i]) != -1) {
                            returntrue;
                        }
                    }
                }
                //pass any key you want in your object //If you want your object to be filtered based on either of the keyif (filterValue('roles') || filterValue('request_role')) {
                returntrue;
            } elsereturnfalse;
            //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

Solution 2:

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><inputtype="checkbox"ng-true-value="Change Agent"ng-false-value=""data-ng-model="filters.requestRoles"value="Change Agent" ><span>My role</span><divng-repeat="question in users | filter:{roles: filters.roles, request_role:filters.requestRoles}"><tableborder="0"><tbody><th>{{question.displayName}}</th><thstyle="background: yellow;">,{{question.roles[0]}}</th><thstyle="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.