Wartość domyślna szablonu Angularjs, jeśli powiązanie jest puste / niezdefiniowane (z filtrem)

Mam powiązanie szablonu, które wyświetla atrybut modelu o nazwie „data”, który jest datą, używając filtru daty Angulara.

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

Na razie w porządku. Jednak w tej chwili, jeśli w polu daty nie ma wartości, powiązanie nic nie wyświetla. Chciałbym jednak, aby wyświetlał ciąg „Różne”, jeśli nie ma daty.

Mogę uzyskać podstawową logikę za pomocą operatora binarnego:

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

Jednak nie mogę zmusić go do pracy z filtrem daty:

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

Jak mogę używać operatora binarnego obok filtra daty?

Okazało się, że wszystko, co musiałem zrobić, to owinąć lewą stronę wyrażenia w miękkie nawiasy:

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

Zrobiłem następujący filtr:

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

        return input;
    }
});

Do użycia w ten sposób:

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

Na wypadek gdybyś chciał spróbować czegoś innego. Oto, co zadziałało dla mnie:

Oparty na operatorze trójargumentowym, który ma następującą strukturę:

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

W wyniku:

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

Jak mogę używać operatora binarnego obok filtra daty?

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

spróbuj też:

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

Naprawdę podobała mi się ta odpowiedź, z ngBind, twój domyślny tekst może po prostu żyć w treści elementu, a następnie, jeśli ngBind oceni jako coś innego niż null / undefined, twoja zawartość zostanie automatycznie zastąpiona i wszystko będzie szczęśliwe

angularjs ustawia wartości domyślne do wyświetlenia przed oceną

W twoim cshtml,

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

W Twoim pliku JS, może app.js,

Poza app.controller dodaj poniższy filtr.

Tutaj „moja data” to funkcja, którą wywołujesz w celu przeanalizowania daty. Tutaj „aplikacja” jest zmienną, która zawiera moduł angular.module

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