Null filter not returning anything: filter:{category:null}"

[martijnve]

Dataset:

$scope.objs = [{name:'obj1', category:null}, {name:'obj2', category:null}, {name:'obj3', category:null}, {name:'obj4', category:1}, {name:'obj5', category:1}, {name:'obj6', category:1}, {name:'obj7', category:2}, {name:'obj8', category:2}, {name:'obj9', category:2}];

When i create an ng-repeat like this it returns the expected subset:
ng-repeat="obj in objs | filter:{category:1}"

But when i do this it does not show anything: (search for null instead of 1)
ng-repeat="obj in objs | filter:{category:null}"

This behaviour has been tested in 1.1.1 and 1.0.1 on chrome 23.0.1271.97 and IE9.

Plnkr and jsfiddle demo's:
http://plnkr.co/edit/jgfPPE
http://jsfiddle.net/KQYMY/17/

[wienand]

Substituting null with '!' works for me:

<span ng-repeat="obj in objs | filter:{category:'!'}">{{obj.name}}<br/></span>

http://plnkr.co/edit/azgQ0x

[martijnve]

Thanks that helps.

It's a hack though so i still think this needs to be fixed.

[pvasek]

Unfortunately, this is not working for values mapped from select which use ng-options and one default value (which has to be value="").

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[MartinodF]

This is still present in 1.2.0, is there any solution available when using ng-options besides writing a custom filter function?

[mvanroon]

I found that the only way to solve this problem is to manually write the <options>'s using ng-repeat and add a default option with value '!!'. This will result in the filter returning all items when the default is selected:

<select ng-model="recordsFilter.categoryId">
    <option value="!!">-- All categories --</option>
    <option ng-repeat="category in categories" value="{{category.id}}">{{project.title}}</option>
</select>

See this fiddle: http://jsfiddle.net/wiebl/jjC4H/

[umbrella-mikhail-menshinskiy]

+1. bug still presented in 1.2.0

[mstelten]

Another way to allow a null value in a filter object is to use this as a comparator:

$scope.allowNullValue = function (expected, actual) {
        if (actual === null) {
            return true;
        } else {
            // angular's default (non-strict) internal comparator
            var text = ('' + actual).toLowerCase();
            return ('' + expected).toLowerCase().indexOf(text) > -1;
        }
    };

<li ng-repeat="exr in exercises | filter:search:allowNullValue">
    // search ==> filter object i'm using
</li>

[rezen]

+1 Bug still present in 1.2.1 & 1.2.6

[kdekooter]

+1 still present in 1.2.8

Please reopen!

[luisfdeandrade]

• 1. I`m using 1.2.4 and this still happen

[alexandernst]

Still present

[davidjnelson]

Thanks to everyone for pointing this out as something to address! Looks like many people have said this is still present, reopening.

[Rundfunk]

I also experienced this issue today with a <select>-tag. The default option ('Show all') resulted in a null value, after which all items were filtered out; showing none. In the mean time, @mstelten's fix solved this issue for me.

[rogeriopvl]

I'm also having this problem with a <select> and using it's ng-model as a filter.

[alexreardon]

I will get on it tomorrow

On Tue, 18 Nov 2014 9:19 pm Georgios Kalpakas notifications@github.com
wrote:

I don't see the issue occuring in 1.3.0 or 1.3.2 (
http://plnkr.co/edit/rwWNwQwCr0pAPJ5CPZMt?p=preview).
@alexreardon https://github.com/alexreardon: Could you post a
reproduction of the issue you are observing in http://plnkr.co or a
similar service ?

—
Reply to this email directly or view it on GitHub
#1780 (comment).

[wesleycho]

This does not appear to be a valid issue anymore - here is a test using Angular 1.3.3: http://plnkr.co/edit/PqBVbewbf8ogv2h6z1CZ?p=preview

[gkalpak]

I've been trying to tell them for over a month now (#1780 (comment)).

@wesleycho: How did you do it so quickly ? 😸

[IgorMinar]

@gkalpak sorry about that. we need a better way to escalate comments from people like you. I believe @petebacondarwin has reached out to you already. We are going to fix this communication issue.

[gkalpak]

@IgorMinar:
NP (I hope I didn't sound too serious about it - there was a 😸 at the end :))
I know there are tons of issues/comments coming and going and there is a lot of different stuff that needs to be taken care of; its easy to miss a comment or two.

[alexreardon]

Strange, I thought I was sure I saw it! I created a plunker with a null value and it seemed to work fine though:

http://plnkr.co/edit/0HDbP7?p=preview

Sorry to raise concern! Cheers @wesleycho

[shellybelle]

I am using Angular v1.3.0-rc.1 and am getting the issue. I was able to get around it using the "undefined" keyword.

<select ng-model = "selectFilter" ng-options="type.Code for type in types>
    <option value="">Select All</option>
</select>

...
    <tr ng-repeat="prod in products | filter:{ type : selectFilter || undefined }" >
...

[pkozlowski-opensource]

@shellybelle v1.3.0-rc.1 is like reallly old and RC version... If you see any unwanted behaviour you should test with the latest stable release and open a separate issue if you believe that there is still some kind of a bug in the latest version.

[willyguevara]

this works for me:

<tr ng-repeat="prod in products | filter:{ type : selectFilter || '!!' }" >

[rjd22]

Please reopen this! This problem still exists in Angular 1.4.3 making it unusable for working with an empty option in combination with ng-options.

[gkalpak]

@rjd22, it seems to be working as expected in 1.4.3+ as well.
If you think you have found a bug, please open an issue, providing a live reproduction of the problem (e.g. using CodePen, plnkr etc).

[rjd22]

@gkalpak after updating to angular 1.4.5 the problem seems to be solved.

[gkalpak]

@rjd22, that's great !

_{(FWIW, I don't thnk there has been any change in filterFilter lately, so it was probably an ngOptions bug/regression.)}

[Charnathan]

@rjd22 @gkalpak I seem to be having the problem now as well, running 1.4.3. "making it unusable for working with an empty option in combination with ng-options.". This exactly, the empty option does not clear the filter.

[gkalpak]

@Charnathan: See #1780 (comment)

[SuneRadich]

I am also seeing this behaviour, see this http://plnkr.co/edit/92POTX?p=preview

I at least expect the filter to be cleared when selecting the empty option, but instead it seems to be filtering on role === null.

Am I doing it wrong, or is this indeed a bug/issue that should be fixed?

[gkalpak]

I think it is so by design. filterFilter will try to match null literally (i.e. match it against null) and ngOptions will the set the model value to null when the empty option is selected.

So, while there are workarounds, it seems that out-of-the-box filterFilter doesn't play so well with ngOptions.

Not sure how this could be fixed without breaking stuff.
I would be more inclined to changing (or rather making configurable) the modelValue of the empty option (maybe using ngValue ?).

/cc @petebacondarwin

[petebacondarwin]

Simple workaround inside the filter expression: http://plnkr.co/edit/QiueNR?p=preview

Here is a better solution along the lines of what @gkalpak suggests. You can provide a directive that returns the result of an expression for the empty value (http://plnkr.co/edit/hMYGNR?p=preview):

<select ng-model="filter.role" ng-options="role for role in roles" ng-empty-value="undefined">
      <option value="">Select role in band</option>
    </select>

The code looks like:

app.directive('ngEmptyValue', ['$parse', function($parse) {
  return {
    require: ['select', 'ngModel'],
    link: function(scope, element, attrs, controllers) {
      var select = controllers[0];
      var readValue = select.readValue;
      var emptyValue = $parse(attrs.ngEmptyValue)(scope);
      select.readValue = function() {
        if (element.val() == '')return emptyValue;
        return readValue();
      };
    }
  };
}]);

The question is whether we need to add this to the core...

[SuneRadich]

@petebacondarwin your solution solves my issue, so for me this is solved. But it might be a good idea to either add to the core, or give an example in the docs perhaps?

[petebacondarwin]

Let's add it as an additional attribute to the ngOptions directive. PRs welcome :-)

[pedro-mass]

@wilguevara this worked for me too! Thanks

<tr ng-repeat="prod in products | filter:{ type : selectFilter || '!!' }" >

[Narretz]

As explained in this thread here and #13471 (comment), the workarounds are simple and robust enough that it's not necessary to have this functionality in core. Here's another way to create an empty value directive that doesn't rely on private API: http://plnkr.co/edit/S9XHqf?p=preview

This could be easily released as a small 3rd party module if needed.