Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

ng-repeat fails to show items when filter text is null (1.3.15) #11573

Closed
RickStrahl opened this issue Apr 14, 2015 · 11 comments
Closed

ng-repeat fails to show items when filter text is null (1.3.15) #11573

RickStrahl opened this issue Apr 14, 2015 · 11 comments
Assignees
@gkalpak
Labels
component: filters component: ngRepeat type: bug
Milestone
1.3.16

Comments

@RickStrahl
Copy link

Upgraded to 1.3.15 today in one of my apps and found that an ng-repeat option list with a filter no longer displayed any items. It appears the problem is due to the fact the initial string filter value is null - if I change the initial value to an empty string it works.

// intial view model value that doesn't work
vm.searchText = null;
vm.resourceList = [ 
   { ResourceId: "Add", Style=null },
   { ResourceId: "Add_Title", Style="margin-left: 10px" },
   ...
];

Then in the HTML to bind:

<option ng-repeat="resource in view.resourceList | filter:view.searchText"
        value="{{resource.ResourceId}}"
        style="{{resource.Style}}">
    {{resource.ResourceId}}
</option>

If the intial value of searchText is null the list will not display any items. If the initial value is an empty string (""), however it works fine. This is a breaking change from 1.3.14 where this worked. If by design this should probably go into the breaking change list.

However I think null should be treated like an empty string for search filters I believe so I'd call this a bug...
@pkozlowski-opensource
Copy link
Member

I believe that it was fixed in master via b5002ab. @gkalpak @petebacondarwin shell we back-port it to 1.3.x?

@gkalpak
Copy link
Member

gkalpak commented Apr 14, 2015

Since this is a regression introduced in 1.3.15, I think it should be back-ported.

@Narretz Narretz added this to the 1.3.16 milestone Apr 15, 2015
gkalpak added a commit to gkalpak/angular.js that referenced this issue Apr 16, 2015
@gkalpak
fix(filterFilter): fix matching against null/undefined
2e574ec 
Included fixes:

* Do not convert `null`/`undefined` to strings for substring matching in
  non-strict comparison mode. Prevents `null`/`undefined` from being matched
  against e.g. 'u'.
* Let `null` (as a top-level filter expression) match "deeply" (as do booleans,
  numbers and strings).
  E.g. let `filterFilter(arr, null)` match an item like `{someProp: null}`.

Fixes angular#11573
@petebacondarwin
Copy link
Member

Thanks @gkalpak - I think that closes this issue.

@gkalpak gkalpak mentioned this issue Apr 16, 2015
Closed
@gkalpak
Copy link
Member

gkalpak commented Apr 16, 2015

@petebacondarwin, I have submitted the PR, but it isn't merged yet. (So, technically this isn't solved (yet).)

@RickStrahl
Copy link
Author

Thanks all for looking into this. Much appreciated!

gkalpak added a commit that referenced this issue Apr 28, 2015
@gkalpak @Narretz
fix(filterFilter): fix matching against null/undefined
9dd0fe3 
Included fixes:

* Do not convert `null`/`undefined` to strings for substring matching in
  non-strict comparison mode. Prevents `null`/`undefined` from being matched
  against e.g. 'u'.
* Let `null` (as a top-level filter expression) match "deeply" (as do booleans,
  numbers and strings).
  E.g. let `filterFilter(arr, null)` match an item like `{someProp: null}`.

Fixes #11573

Closes #11617
@issoft-nsiniakevich
Copy link

@gkalpak How can I do "not null" check in this way?
{ someProperty: !null} doesn't seems to be working
http://plnkr.co/edit/Apv2qqTGaWQMSpjywnyX?p=preview

{ someProperty: ''} it's working, but I don't think that it's very obvious not null check

in the 1.3.15 { someProperty: '!null'} worked fine

@gkalpak
Copy link
Member

gkalpak commented Jun 8, 2015

@issoft-nsiniakevich, I am afraid you should either use {someProp: ''} (which means "match against any primitive value (except for null/undefined)") or use a custom filter function.
The 1.3.15 behaviour was a regression (introduced after a refactoring in 1.3.6), so 1.3.16 re-instated the "original" behaviour.

@ali-bugdayci ali-bugdayci mentioned this issue Jun 9, 2015
Closed
@TheSharpieOne
Copy link

Also worth noting that I have been tracking this ability in an SO answer. You can see there that this has changed over the different versions and while it appears that {someProp: ''} is recommended, {someProp: '!!'} will work as well and has support/worked back through 1.1 (breaking 1.3.6 through 1.3.15 as noted as regression).

@Nazirkulov
Copy link

Hi dear ang developers! $filter('filter')(array, {property: "!null"}) or
$filter('filter')(array, {property: !null}) does not work . It work for double not ("!!")
$filter('filter')(array, {property: "!!"}) - its norm ?

@petebacondarwin
Copy link
Member

$filter('filter')(array, {property: "!null"}) is saying that the array item must not contain the text "null", rather than the property not being null.

$filter('filter')(array, {property: !null}) is equivalent to $filter('filter')(array, {property: true}) since the !null expression will be evaluated before being pass to the filter.

It seems that "!!" is the best approach to take in this scenario.

@gkalpak
Copy link
Member

gkalpak commented Jun 15, 2018

To expand a bit on what @petebacondarwin said:

In the current version (which hasn't changed iirc since 1.4.x), {prop: ''} (which is equivalent to {prop: '!!'} - this is a bug in filterFilter, but ¯\_(ツ)_/¯ ) matches all objects that have a primitive prop value except null or undefined. Similarly, {prop: '!'} matches the opposite (null, undefined, or non-primitive<sup):

const expr = {foo: ''};
filterFilter([{foo: 'bar'}, {foo: true}, {foo: 1}], expr)  //--> All match
filterFilter([{foo: null}, {foo: undefined}, {foo: {}}], expr)  //--> No match

const expr = {foo: '!'};
filterFilter([{foo: 'bar'}, {foo: true}, {foo: 1}], expr)  //--> No match
filterFilter([{foo: null}, {foo: undefined}, {foo: {}}], expr)  //--> All match

*: Objects with a custom toString() method are matched using the result of their toString().

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@gkalpak gkalpak

Labels
component: filters component: ngRepeat type: bug
Projects
None yet
Milestone
1.3.16
Development

No branches or pull requests
8 participants
@petebacondarwin @TheSharpieOne @pkozlowski-opensource @Narretz @RickStrahl @gkalpak @issoft-nsiniakevich @Nazirkulov