Angularjs filter not null

JavascriptAngularjsAngularjs Filter

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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>

Solution 3 - Javascript

I think this is easier to read

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

Solution 4 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionScotty BollingerView Question on Stackoverflow
Solution 1 - JavascriptTheSharpieOneView Answer on Stackoverflow
Solution 2 - JavascriptskalbView Answer on Stackoverflow
Solution 3 - JavascriptJens AleniusView Answer on Stackoverflow
Solution 4 - JavascriptIrishDubGuyView Answer on Stackoverflow