Ignoring blank dropdown values in an AngularJS filter

Question

I have a tabular list of user data which I'm adding 'advanced search' functionality to. The advanced search consists of a number of dropdowns allowing users to filter their results, for example, limiting the results to users from a particular department:

<select ng-model="search.department_id" ng-options="department.id as department.name for department in departments">
    <option value="">(Select from list)</option>
</select>

The results are then displayed using:

<table>
    <tr ng-repeat="user in users | filter:search | orderBy:'name')">
        <td> [code to show user data here.] </td>
    </tr>
</table>

If you select a department from the dropdown, this works correctly. But if you change your mind and pick the default '(Select from list)' option again, only users with a blank department_id value are shown. What I want to happen is for the department dropdown to be ignored if no department is selected.

After some searching around, it looked like I could solve this using a custom comparator, so I wrote this:

$scope.ignoreNullComparator = function(expected, actual){
    if (expected === null) {
        return true;
    } else {
        return angular.equals(expected, actual);
    }
};

and changed the ng-repeat to:

ng-repeat="user in users | filter:search:ignoreNullComparator | orderBy:'name'

but although with some debugging could see the custom comparator being used, it didn't make any difference to the results.

So, how can I get the filter to ignore the dropdowns if the blank option is selected?

Ye Liu · Accepted Answer · 2014-06-16 16:08:30Z

4

The order of parameters in your comparator is wrong, comparator should be defined as function(actual, expected):

$scope.ignoreNullComparator = function(actual, expected){
    if (expected === null) {
        return true;
    } else {
        return angular.equals(expected, actual);
    }
};

answered Jun 16, 2014 at 16:08

Ye Liu

8,9861 gold badge40 silver badges34 bronze badges

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

1 Comment

Tim Fountain Over a year ago

Thanks, that did it. I had a feeling it'd be something simple!

SahebSoft · Accepted Answer · 2016-11-03 08:37:17Z

i update the function to work with string and number search fields

$scope.ignoreNullComparator = function(actual, expected){            
            if (expected === null || expected === '' || typeof expected === "undefined") {
                return true;
            } else   if(!isNaN(expected)) {
                expected2 = parseInt(expected);
                return angular.equals(expected2, actual);
            } else  if( actual.indexOf(expected) === -1 ){
                return false;
            }
            return true;        
        };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Collectives™ on Stack Overflow

Ignoring blank dropdown values in an AngularJS filter

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related