ng-hide not working with two filters angularjs

Question

I'm having trouble using two filters with ng-hide. Here's a fiddle that displays my problem: http://jsfiddle.net/czPf6/2/ Here's my code that conditionally selects which filter to apply based on input values in an input box and a select box:

function applySearchFilter() {
        var filterCategory = $scope.filters.cat.toLowerCase();
        //console.log(filterCategory);
        var category = $scope.friend.job.toLowerCase();
        //console.log(category);
        var filter = $scope.filters.name.toLowerCase();
        //console.log(filter);
        var name = $scope.friend.name.toLowerCase();
        console.log(name + " " + category);
        console.log("filter:" + filter + "/category:" + filterCategory);
        if($scope.filters.name == "" && $scope.filters.cat !== ""){
            var isCategory = (filterCategory == category);
            console.log(isCategory + "1st");
            $scope.isExcludedByFilter =  ! isCategory;
            console.log($scope.isExcludedByFilter);
        } else if($scope.filters.name !=="" && $scope.filters.cat == ""){

            var isSubstring = ( name.indexOf( filter ) !== -1 );
            console.log(isSubstring + "2nd");
            $scope.isExcludedByFilter = ! isSubstring;
            console.log($scope.isExcludedByFilter);
        } else if($scope.filters.name !=="" && $scope.filters.cat !==""){

            var isCategory = (filterCategory == category);
            var isSubstring = ( name.indexOf( filter ) !== -1 );
            console.log(isCategory + "3rd");
            console.log(isSubstring + "3rd");
            $scope.isExcludedByFilter = ! isSubstring && ! isCategory;
            console.log($scope.isExcludedByFilter);
        }

The log statements print out what I would expect them to be, but the filter only works when both input fields have a value. What am I doing wrong here?

mnsr · Accepted Answer · 2013-07-25 07:43:03Z

1

It's your isExcludedByFilter thing at the end that's causing it:

$scope.isExcludedByFilter = ! isSubstring || ! isCategory;

I've commented that line out.

I've changed:

} else if($scope.filters.name !=="" && $scope.filters.cat == ""){

    var isSubstring = ( name.indexOf( filter ) !== -1 );
    $scope.isExcludedByFilter = ! isSubstring && ! isCategory; // added && !isCategory

} else if($scope.filters.name !=="" && $scope.filters.cat !==""){

    var isCategory = (filterCategory == category);
    var isSubstring = ( name.indexOf( filter ) !== -1 );

    $scope.isExcludedByFilter = ! isSubstring || ! isCategory; // changed && to ||
}

i also added the following at the end of the above if statement for the "Any" filter. Which means it'll show all 'friends' in the list:

        } else if($scope.filters.name =="" && $scope.filters.cat == ""){
             $scope.isExcludedByFilter = false;
        }

fiddle: http://jsfiddle.net/czPf6/10/

edited Jul 25, 2013 at 7:43

answered Jul 25, 2013 at 7:37

mnsr

12.4k4 gold badges55 silver badges80 bronze badges

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

1 Comment

sh3nan1gans Over a year ago

Thank you for catching that! The sample app worked with that conditional flow but for some reason my real app would not. I was able to fix this by placing the check for no input values at the beginning of the nested if statements.

Collectives™ on Stack Overflow

ng-hide not working with two filters angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related