AngularJS ngRepeat filter with null values removes nulls permanently, why?

Question

Here is a JSFiddle example I made that explains the issue:

http://jsfiddle.net/s6Lj2/2/

Notice that in the data

$scope.places = [{
    name: 'Chicago',
    status: 'Active',
    analyst: 'Sam',
    recorder: 'Nate' //this can have a value or be null
}, .... more data...];

That sometimes I have set recorder to null and sometimes to an empty string

I find it odd that when I sort on the recorder that nulls disappear and never come back when I clear the filtered field.

The rows in the table are removed permanently. Why is that? I was able to fix the problem in the real app by making sure that the java generated empty strings instead of nulls when the database has no recorder name but I don't understand why it was ever an issue to begin with.

I was thinking it has to do with the hash values that are given to the removed elements and a null can't have a hash? I would think that Angular would be able to compensate for that somehow but maybe not.

The other solution is to just use ng-hide and write a custom filter that way. ng-hide just adds a display:none to the css and leaves the element in the DOM.

Answer 1

When you first load the page, $scope.filteredData.recorder is undefined since you do not explicitly set it up in your controller. When it's undefined, it doesn't filter your data.

Once you enter something into the recorder filter text field, $scope.filteredData.recorder is set to equal that string. Once you clear the input text field, $scope.filteredData.recorder === '', so it continues to filter your data by an empty string, which will match all of your data except for null/undefineds.