CODEWITHSUNDEEP
javascriptangularjsangularjs-filter
Scotty Bollinger
Scotty Bollinger

Reputation: 2363

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?

Upvotes: 71

Views: 70478

Answers (4)

Jens Alenius
Jens Alenius

Reputation: 1931

I think this is easier to read

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

Upvotes: 6

IrishDubGuy
IrishDubGuy

Reputation: 1103

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

Upvotes: 1

TheSharpieOne
TheSharpieOne

Reputation: 25736

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.

Upvotes: 125

skalb
skalb

Reputation: 5567

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>

Upvotes: 42

Related Questions