0

I have three dropdown boxes. I need to filter the data and need to be displayed in the table based on my checkbox selection(either with single checkbox or two checkboxes or three checkboxes).

I have done the following, but if we observe it clearly, I am not able to filter the data properly using AngularJS.

Like:

a. It should work for individual checkbox selection: means if I select any single checkbox either from Name or Description or Field4, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)

b. It should work for multiple(two) checkbox selection: means if I select any multiple checkboxes like either one from Name and one from Description or one from Description and one from Field4 or one from Field4 and one from Name, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)

c. It should work for multiple(three) checkbox selection: means if I select the three checkboxes like one from Name and one from Description and one from Field4, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)

It is working fine for the first time checkbox selection only, means: after loading the above code/app, if we check either any one of the above selections(like whether single checkbox selection or two checkbox selection or three checkbox selection) then it's working fine, later it is not working(means if we uncheck the above any criteria and then if we select any checkbox again then it's not working, for that again we need to refresh the app/code then only it's working).

Example: if I select one from Name, then respective matched data will be displayed. Then again if I uncheck the same and check the some other checkbox like from Description then it's not working. Similarly for all the above criteria. You can observe it clearly.

Please let me know that what I have done wrong here and let me know how to filter it properly. Created Fiddle. Thanks in advance !

Improve this question
4
  • Your fiddle appears to be working as you've specified. What is the behavior that isn't working as expected? Commented Nov 8, 2016 at 11:23
  • @LarryTurtis, If we observe clearly, It is working fine for the first time checkbox selection only, i.e if we check either any one of the above selections(like whether single checkbox selection or two checkbox selection or three checkbox selection) then it's working fine, later it is not working(i.e if we uncheck the above any criteria and then if we select any checkbox again then it's not working, for that again we need to refresh the code then only it's working). Commented Nov 8, 2016 at 13:26
  • @LarryTurtis, Example: if I select one from Name, then respective matched data will be displayed. Then again if I uncheck and check the same checkbox then it's not working. You can observe it clearly. Commented Nov 8, 2016 at 13:26
  • @LarryTurtis, Example: if I select one from Name, then respective matched data will be displayed. Then again if I uncheck the same and check the some other checkbox, like from Description then it's not working. Similarly for the above all criteria. You can observe it clearly Commented Nov 8, 2016 at 13:37

2 Answers 2

Reset to default
2

The problem is the convoluted filtering logic. Anytime you find yourself nesting lots of if statements, think about reorganizing the branching logic. By breaking it into smaller components, you can make it easier to manage, and if you can avoid using if altogether, then you only have to test one path, instead of several.

Every time a user checks a box, we need to make sure that we only display items that match however many boxes are checked. So we need to know 1) how many boxes are checked, n, and 2) how many items can be found with n matching fields.

We can take advantage of the fact that Boolean variables can be cast to integers (0 = false, true = 1) and use that to count the number of checked boxes, as well as the number of matches found.

We can also put the field names into an array, so that we don't have a lot of repetition in our functions.

Fiddle example here.

var fields = ["name", "description", "field4"];

//for each field, count how many fields the item matches
function getMatches(item, matchesNeeded) {
    var foundMatches = 0;
    fields.forEach(field => {
      foundMatches += item[field] === $scope.pagedItems[field]
    });

    //make sure found at least one match and found desired minimum
    return foundMatches && foundMatches >= matchesNeeded;
}

//count how many boxes are checked
//this will tell us how many different fields we are matching on
function numChecked() {
    var count = 0;
    fields.forEach(field => {
        //this will auto convert falsy to 0.
        //truthy values will be 1
        count += Boolean($scope.pagedItems[field]);
    });
    return count;
}

$scope.filterItems = function(item) {
    return getMatches(item, numChecked());
};
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

yes, It's working fine as expected ! Thanks for your help !
1

As @Larry pointed it was more based on logic. I have modified Apress book 'Pro AngularJS' Source Code from GIT for this.

Basic logic will in filter function as below -

$scope.categoryFilterFn = function (product) {
    var canHave = false;//dont load by default
    var atLeastOneTrue = false;//Check if previously checked any condition
    angular.forEach(filterValues, function(selectedValue, key) {
        var selectVals = Object.values(selectedValue);
            if(selectVals.indexOf(product[key]) !== -1) {//if values exits in product.
                canHave = !atLeastOneTrue ? true : canHave;
            }else{
                canHave = false;
            }
            atLeastOneTrue = true;
    });
    return canHave;
}

For working Fiddle.

Improve this answer

1 Comment

Thanks for your reply, yes it's also working fine as per expected but I need sorting also. Thanks for your support !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.