Hi, all I want to filter ng-repeat
value on clicking of check box field.
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...
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