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?

Solution 1

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

Solution 2

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...

Solution 3

| 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);
};

Solution 4

You can do like this as well

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

View more solutions