71

Trying to filter out items with a certain property that is not null So for:

var details = [{name:'Bill', shortDescription: null}, {name:'Sally', shortDescription: 'A girl'}]

I would like to only show one li; the one for sally. This is what I have tried with no success

<ul>
<li ng-repeat="detail in details | filter:{shortDescription:'!'}">
<p>{{detail.shortDescription}}</p>
</li>
</ul>

Any idea how I can do this without creating a custom filter? Or even so, what the custom filter would look like?

Improve this question
1

4 Answers 4

Reset to default
125

Angular >=1.3.16 to latest (1.5.5 at time of writing/update) use '' (empty string) (or '!!' also works)

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Example: http://jsfiddle.net/TheSharpieOne/1mnachk6/

Angular >=1.3.6 and <=1.3.15 use '!null'

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: '!null'}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Example: http://jsfiddle.net/TheSharpieOne/4wxs67yv/

Angular >=1.2 and <=1.3.5 use '' (empty string) (or '!!' also works)

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Example: http://jsfiddle.net/TheSharpieOne/ovsqf17n/

Angular <1.2 '!!'

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: '!!'}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Example: http://jsfiddle.net/TheSharpieOne/RGEdc/

Overall, '!!' has the best support, but '' (empty string) is recommended and intended for this.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Thanks so much. Searched the web for over an hour and couldn't find that
No problem. It also filters out undefined.
@TalasanNicholson if it's filtering on null/undefined then false would be ok.
@TheSharpieOne is this documented?
This does not seem to work with a checkbox value="!!" jsfiddle.net/2RBV9
|
42

According to https://github.com/angular/angular.js/issues/11573 for Angular >= 1.4, the recommendation is to use '' which matches any primitive except null/undefined.

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>
Improve this answer

2 Comments

Works, thanks. But in this case the angularjs syntax is absurd (filter--).
@MCurbelo, my own pet peeve with the filter syntax is that the word "filter" is ambiguous. Are filtering for null descriptions? Or filtering out null descriptions? You can't tell from looking at the code. A better name would be "filterOut" or "showOnly" (with proper semantics).
6

I think this is easier to read

 <ul>
    <li ng-repeat="detail in details" ng-if="detail.shortDescription">
        <p>{{detail.shortDescription}}</p>
    </li>
 </ul>
Improve this answer

2 Comments

there are tons of solution about filtering null values, this is the one I prefer
A disadvantage to this is if you have a thousand records, it still prints as many comment tags as there are records which don't have short descriptions. The filter option prevents this.
1

It is worth noting that to use the empty quotes solution, you need to leave the comparator at its default of false. You maybe be used to putting true in here in your controller filters, like this :

const myAssessments = 
       this.filterFilter(this.assessments, {userId: this.user.id}, true);

That type of strict filter wouldn't work without the final true. But you need to drop the true or make it false for a not null check to work :

const activeAndHistoric = 
      this.filterFilter(filteredAssessments, {historicYear: ''}, false);
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.