AngularJS filter comparator true while displaying ng-repeat list when input field is empty

angularjs, javascript

Solution

You'll want to use a custom comparator function. It will allow you to perform a strict comparison except when the predicate is falsy.

Your markup would then be:

 <input type="text" class="form-control" id="search.priority"
  title='Priority number to filter by'
  ng-model="search.priority" >

<tr ng-repeat="workflowItem in workflows | filter:search:exceptEmptyComparator">
 <td>{{workflowItem.priority}}</td>

And define the comparator function on your controller:

$scope.exceptEmptyComparator = function (actual, expected) {
    if (!expected) {
       return true;
    }
    return angular.equals(expected, actual);
}

That should do the trick.

Problem

I'm going off by this example fiddle where it demonstrates the use of comparator parameter to filter exact matches....: http://jsfiddle.net/api/post/library/pure/ priority is a number from 1-100, but I have it input as text and filtered as string so any data that includes a substring will also pass through the ng-repeat...like when I type 1 it will also display 11, 111, 132 etc...which is how I came across the :true comparator. I've read other stackflow answers suggesting to write custom filter functions but with the true comparator it looks like I can achieve what I want just by: ``` <input type="text" class="form-control" id="search.priority" title='Priority number to filter by' ng-model="search.priority" > <tr ng-repeat="workflowItem in workflows | filter:search:true"> <td>{{workflowItem.priority}}</td> ``` where it does only filter the exact matches. However, obviously it does not pass anything when the input field is empty since nothing matches the empty string. My question is: Is there a way I can allow ng-repeat to still display everything when the field is empty while keeping the exact match filter? Appreciate everyone's time!

Original source