Angularjs Filter nicht null

69

Der Versuch, Elemente mit einer bestimmten Eigenschaft herauszufiltern, die nicht null ist. Also für:

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

Ich möchte nur ein Li zeigen; der für Sally. Das habe ich ohne Erfolg versucht

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

Haben Sie eine Idee, wie ich dies tun kann, ohne einen benutzerdefinierten Filter zu erstellen? Oder wie würde der benutzerdefinierte Filter aussehen?

javascript angularjs angularjs-filter Scotty Bollinger
quelle
Andere
andrew.fox

Antworten:

40

Laut https://github.com/angular/angular.js/issues/11573 für Angular> = 1.4 wird empfohlen, '' zu verwenden, das mit jedem Grundelement außer null / undefiniert übereinstimmt.

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>
skalb
quelle
1
Danke fürs Schreiben!
James Drinkard
5
Funktioniert, danke. Aber in diesem Fall ist die Angularjs-Syntax absurd (filter--).
MCurbelo
1
@MCurbelo, mein eigener Liebling mit der Filtersyntax ist, dass das Wort "Filter" mehrdeutig ist. Filtern Sie nach Nullbeschreibungen? Oder Nullbeschreibungen herausfiltern ? Sie können es nicht anhand des Codes erkennen. Ein besserer Name wäre "filterOut" oder "showOnly" (mit der richtigen Semantik).
user2023861
123

Winkel> = 1.3.16 bis späteste (1.5.5 zum Zeitpunkt des Schreibens / Aktualisierens) Verwendung ''(leere Zeichenfolge) (oder '!!'funktioniert auch)

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

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

Winkel> = 1.3.6 und <= 1.3.15 verwenden '!null'

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

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

Winkel> = 1.2 und <= 1.3.5 verwenden ''(leere Zeichenfolge) (oder '!!'funktioniert auch)

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

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

Winkel <1,2 '!!'

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

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

Insgesamt '!!'hat die beste Unterstützung, aber ''(leere Zeichenfolge) wird empfohlen und ist dafür vorgesehen .

TheSharpieOne
quelle
3
Vielen Dank. Ich habe über eine Stunde im Internet gesucht und konnte das nicht finden
Scotty Bollinger
2
Kein Problem. Es filtert auch heraus undefined.
TheSharpieOne
@TalasanNicholson Wenn es nach null / undefined filtert, wäre false in Ordnung.
BrianS
@TheSharpieOne ist das dokumentiert?
BrianS
Dies scheint nicht mit einem Kontrollkästchen zu value="!!" funktionieren jsfiddle.net/2RBV9
Syl
6

Ich denke, das ist leichter zu lesen

 <ul>
    <li ng-repeat="detail in details" ng-if="detail.shortDescription">
        <p>{{detail.shortDescription}}</p>
    </li>
 </ul>
Jens Alenius
quelle
Es gibt
jede Menge
Ein Nachteil dabei ist, dass bei tausend Datensätzen immer noch so viele Kommentar-Tags gedruckt werden, wie es Datensätze gibt, die keine Kurzbeschreibungen enthalten. Die Filteroption verhindert dies.
James Gray
1

Es ist erwähnenswert, dass Sie den Komparator auf der Standardeinstellung von belassen müssen, um die Lösung für leere Anführungszeichen zu verwenden false. Sie sind es vielleicht gewohnt, hier in Ihren Controller-Filtern Folgendes einzutragen:

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

Diese Art von strengen Filtern würde ohne das Finale nicht funktionieren true. Sie müssen jedoch true oder false löschen, damit eine Prüfung ohne Null funktioniert:

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