Angularjs filter is not null

Question

Trying to filter out elements with a specific property that is not null. For:

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

I would like to show only one; one for sally. This is what I tried without 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 what a custom filter will look like?

Answer 1

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

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

Answer 2

Angular> = 1.3.16 to the last (1.5.5 at the time of writing / updating) use '' (empty line) (or '!!' 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 '!!' 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 better support, but '' (empty line) is recommended and designed for this .

Answer 3

It is worth noting that to use the solution with empty quotes, you need to leave the default comparator false . You will probably use to include your controller filters here, for example:

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

This type of string filter will not work without final true . But you need to reset true or make it false to perform a non-null check:

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

Answer 4

I think it is easier to read.

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