ng-repeat filter null value not displaying

Question

Why won't angular display values that are null when I apply:

ng-repeat="p in foo | filter: filter2"

where filter2 is

 $scope.filter2 = function(p){
    if (p.state === null){
        return p.state;
    } else{
        return;
    }
};

here's a plnkr with what I'm saying: http://plnkr.co/edit/cj3v1fuBu6sHVI7A4qlq?p=preview

The filter works when it's anything but a null but I'm trying to only the null ones to display. I could try changing all the null values to a default value string other than a null? Is there anywhere to get the filter to work with nulls?

Different solution: https://stackoverflow.com/a/24992197/257470 — andrew.fox, Sep 01 '17 at 10:03

Niko Nyman · Answer 1 · 2014-11-26T08:36:24.790

You can filter null items without writing a custom filter.

Using the code in your plunk, this will return the null items:

<ul ng-repeat="p in foo | filter:{state:'!'}" >
  <li>{{p.name}}</li>
</ul>

Conversely, this will return all non-null items:

<ul ng-repeat="p in foo | filter:{state:'!!'}" >
  <li>{{p.name}}</li>
</ul>

The double not operator converts any value to boolean: the first not operator ! converts a truthy value to a boolean false, the second one inverts the boolean back to true. In my tests the filter actually works just by using state:'' but I would use !! just to be on the safe side...

Caspar Harmer · Accepted Answer · 2014-09-17T02:15:19.637

6

I think the only thing wrong was that you needed to return the entire object.

Based on Brad's comment below, I went and checked the docs and he's right. The only reason my code sample works is because it's returning a 'truthy' value.

I've modified my code example below to take that into account.

Here's the filter:

$scope.filter2 = function(p){
    if (p.state === null){
        return true;
    } else{
        return;
    }
};

Here is the relevant section in the docs:

function(actual, expected): The function will be given the object value and the predicate value to compare and should return true if the item should be included in filtered result.

plunkr

edited Sep 17 '14 at 02:15

answered Sep 16 '14 at 22:50

Caspar Harmer

8,097
2
42
39

haha, I see what you did. You returned p instead of p.state. If it works it works... In javascript can you not return a null value? I thought you could. – Garuuk Sep 16 '14 at 22:59
You can, but perhaps ng-repeat doesn't like it – Caspar Harmer Sep 16 '14 at 23:07

score 5 · Answer 3 · answered Sep 16 '14 at 23:31

5

| filter:{expression} is expecting a true or false evaluation, not an object. Therefore:

$scope.filter1 = function(p){
    return (p.state === 'on');
};

 $scope.filter2 = function(p){
    return (p.state === null);
};

answered Sep 16 '14 at 23:31

Brad Wells

429
2
5

score 2 · Answer 4 · answered Apr 18 '18 at 06:07

2

You can do like this as well

<ul ng-repeat="p in foo" >
  <li ng-if = "p.states">{{p.name}}</li>
</ul>

answered Apr 18 '18 at 06:07

Dharmendra Kumar

21
2

score 0 · Answer 5 · answered Mar 22 '15 at 22:44

0

You can test for Null in the expression like this:

ng-repeat="p in foo | filter:{state:null}"

answered Mar 22 '15 at 22:44

matharden

757
6
15

ng-repeat filter null value not displaying

5 Answers5

Linked