Angularjs Template Standardwert bei Bindung Null / Undefiniert (mit Filter)

178

Ich habe eine Vorlagenbindung, die ein Modellattribut namens "Datum" anzeigt, bei dem es sich um ein Datum handelt, das den Datumsfilter von Angular verwendet.

<span class="gallery-date">{{gallery.date | date:'mediumDate'}}</span>

So weit, ist es gut. Wenn im Datumsfeld jedoch kein Wert vorhanden ist, zeigt die Bindung nichts an. Ich möchte jedoch, dass die Zeichenfolge 'Various' angezeigt wird, wenn kein Datum vorhanden ist.

Ich kann die grundlegende Logik mit einem binären Operator erhalten:

<span class="gallery-date">{{gallery.date || 'Various'}}</span>

Ich kann es jedoch nicht mit dem Datumsfilter zum Laufen bringen:

<span class="gallery-date">{{gallery.date | date:'mediumDate' || "Various"}}</span>

Wie kann ich den Binäroperator neben dem Datumsfilter verwenden?

— Ablenkung
quelle

291

Es stellte sich heraus, dass ich nur die linke Seite des Ausdrucks in weiche Klammern setzen musste:

<span class="gallery-date">{{(gallery.date | date:'mediumDate') || "Various"}}</span>

— Ablenkung
quelle

12

Dies funktioniert nicht, wenn Sie einen '

— 0'

6

@neelshah Es funktioniert, wenn Sie etwas tun wie:{{(gallery.date | date:'mediumDate') || "0"}}

— Rahil Wazir

2

Funktioniert leider nicht, wenn das Datum Null statt undefiniert ist. Trotzdem ein guter Trick. Ich fürchte, ich muss einen benutzerdefinierten Filter für meinen Fall erstellen.

— PhiLho

52

Ich habe folgenden Filter gemacht:

angular.module('app').filter('ifEmpty', function() {
    return function(input, defaultValue) {
        if (angular.isUndefined(input) || input === null || input === '') {
            return defaultValue;
        }

        return input;
    }
});

So zu verwenden:

<span>{{aPrice | currency | ifEmpty:'N/A'}}</span>
<span>{{aNum | number:3 | ifEmpty:0}}</span>

— Supergibbs
quelle

Tolle Idee! Ich habe es jedoch ein wenig erweitert und dupliziert: Verschachteln einer if (angular.isUndefined(defaultValue) || ... )Anweisung in die vorhandene, durch die der defStringFilter die Zeichenfolge " default" zurückgibt (andere werden wahrscheinlich später kommen). Dies ermöglicht es mir, es als <span>{{expected.string | defString}}</span>und defaultals endgültiges Fallback-Level zu verwenden.

37

Nur für den Fall, dass Sie etwas anderes ausprobieren möchten. Das hat bei mir funktioniert:

Basierend auf dem ternären Operator mit folgender Struktur:

condition ? value-if-true : value-if-false

Als Ergebnis:

{{gallery.date?(gallery.date | date:'mediumDate'):"Various" }}

— Pol
quelle

1

Pedrs Antwort (13. Mai 13 um 13:27 Uhr , stackoverflow.com/a/16523266/1563880 ) ist fast dieselbe, aber Ihre Lösung ist expliziter. Howerer, mehr Briefe zu schreiben)

— nktssh

1

Dies ist intuitiver, insbesondere wenn Sie einen Programmierhintergrund haben. Ternäre Operatoren ebnen den Weg für einfache If else Ifs.

— Asgs

2

Es tut mir leid, einen alten Thread zu stoßen, aber diese Lösung ist wahrscheinlich auch leistungsfähiger als die akzeptierte Antwort, da sie den Filter nicht

— aufruft,

Dies ist auch nützlicher, wenn Sie mit tieferen Hierarchien arbeiten müssen.

— Sogar Mien

8

Wie kann ich den Binäroperator neben dem Datumsfilter verwenden?

<span class="gallery-date">{{gallery.date | date:'mediumDate' || "Date Empty"}}</span>

Sie versuchen auch:

<span class="gallery-date">{{ gallery.date == 'NULL' ? 'mediumDate' : "gallery.date"}}</span>

— Rizo
quelle

3

Diese Antwort hat mir sehr gut gefallen. Mit ngBind kann Ihr Standardtext nur im Elementkörper gespeichert werden. Wenn ngBind dann als nicht null / undefiniert ausgewertet wird, wird Ihr Inhalt automatisch ersetzt und alles ist glücklich

anglejs legt Standardwerte fest, die vor der Auswertung angezeigt werden sollen

— Chrismarx
quelle

0

In Ihrem cshtml,

<tr ng-repeat="value in Results">                
 <td>{{value.FileReceivedOn | mydate | date : 'dd-MM-yyyy'}} </td>
</tr>

In Ihrer JS-Datei möglicherweise app.js,

Fügen Sie außerhalb von app.controller den folgenden Filter hinzu.

Hier ist das "mydate" die Funktion, die Sie zum Parsen des Datums aufrufen. Hier ist die "App" die Variable, die das angle.module enthält

app.filter("mydate", function () {
    var re = /\/Date\(([0-9]*)\)\//;
    return function (x) {
        var m = x.match(re);
        if (m) return new Date(parseInt(m[1]));
        else return null;
    };
});

— Mohamedasiq
quelle