How to filter the JSON data using AngularJS? -

i have 3 dropdown boxes. need filter data , need displayed in table based on checkbox selection(either single checkbox or two checkboxes or three checkboxes).

i have done following, if observe clearly, not able filter data using angularjs.

like:

a. should work individual checkbox selection: means if select single checkbox either name or description or field4, respective matched filtered data should displayed in table, otherwise shouldn't displayed data(i.e if doesn't match our checkbox selection means won't display data)

b. should work multiple(two) checkbox selection: means if select multiple checkboxes either one name , one description or one description , one field4 or one field4 , one name, respective matched filtered data should displayed in table, otherwise shouldn't displayed data(i.e if doesn't match our checkbox selection means won't display data)

c. should work multiple(three) checkbox selection: means if select 3 checkboxes one name , one description , one field4, respective matched filtered data should displayed in table, otherwise shouldn't displayed data(i.e if doesn't match our checkbox selection means won't display data)

it working fine first time checkbox selection only, means: after loading above code/app, if check either 1 of above selections(like whether single checkbox selection or two checkbox selection or three checkbox selection) it's working fine, later not working(means if uncheck above criteria , if select checkbox again it's not working, again need refresh app/code it's working).

example: if select 1 name, respective matched data displayed. again if uncheck same , check some other checkbox description it's not working. above criteria. can observe clearly.

please let me know have done wrong here , let me know how filter properly. created fiddle. in advance !

the problem convoluted filtering logic. anytime find nesting lots of if statements, think reorganizing branching logic. breaking smaller components, can make easier manage, , if can avoid using if altogether, have test 1 path, instead of several.

every time user checks box, need make sure display items match many boxes checked. need know 1) how many boxes checked, n, , 2) how many items can found n matching fields.

we can take advantage of fact boolean variables can cast integers (0 = false, true = 1) , use count number of checked boxes, number of matches found.

we can put field names array, don't have lot of repetition in our functions.

fiddle example here.

var fields = ["name", "description", "field4"];  //for each field, count how many fields item matches function getmatches(item, matchesneeded) {     var foundmatches = 0;     fields.foreach(field => {       foundmatches += item[field] === $scope.pageditems[field]     });      //make sure found @ least 1 match , found desired minimum     return foundmatches && foundmatches >= matchesneeded; }  //count how many boxes checked //this tell how many different fields matching on function numchecked() {     var count = 0;     fields.foreach(field => {         //this auto convert falsy 0.         //truthy values 1         count += boolean($scope.pageditems[field]);     });     return count; }  $scope.filteritems = function(item) {     return getmatches(item, numchecked()); };