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

180

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?

Nieuwaga
źródło

Odpowiedzi:

293

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>
Nieuwaga
źródło
12
To nie działa, jeśli chcesz wyświetlić wartość „0” w kolumnie
neel shah
6
@neelshah Działa, jeśli zrobisz coś takiego:{{(gallery.date | date:'mediumDate') || "0"}}
Rahil Wazir
2
Niestety, nie działa, jeśli data jest równa zero zamiast niezdefiniowanej. Wciąż jednak dobra sztuczka. Obawiam się, że muszę zrobić niestandardowy filtr do mojej obudowy.
PhiLho
52

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>
Supergibbs
źródło
Naprawdę wspaniały pomysł! Jednak nieco go rozszerzyłem i zduplikowałem: zagnieżdżając if (angular.isUndefined(defaultValue) || ... )instrukcję wewnątrz istniejącej, za pomocą którejdefString filtr zwraca ciąg znaków " default" (inne prawdopodobnie przyjdą później). To pozwala mi używać go jak <span>{{expected.string | defString}}</span>i dostać defaultjako ostateczny poziom awaryjnej.
37

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" }}
Pol
źródło
1
Odpowiedź Pedra (13 maja 2013 o 13:27, stackoverflow.com/a/16523266/1563880 ) jest prawie taka sama, ale Twoje rozwiązanie jest bardziej jednoznaczne. Jednak więcej listów do napisania)
nktssh
1
Jest to bardziej intuicyjne, zwłaszcza jeśli masz doświadczenie w programowaniu. Operatory trójskładnikowe otwierają drogę do prostego If else Ifs.
asgs
2
przepraszam, że wbijam stary wątek, ale to rozwiązanie jest również prawdopodobnie bardziej wydajne niż zaakceptowana odpowiedź, ponieważ nie wywołuje filtru, jeśli wartość okaże się fałszywa
SnailCoil
Jest to również bardziej przydatne, gdy trzeba pracować z głębszymi hierarchiami.
Nawet Mien
8

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>
Rizo
źródło
0

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;
    };
});
Mohamedasiq
źródło