Angularjs filter not null
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?
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.
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>
I think this is easier to read
<ul>
<li ng-repeat="detail in details" ng-if="detail.shortDescription">
<p>{{detail.shortDescription}}</p>
</li>
</ul>
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);