Nilai Default Template Angularjs jika Binding Null / Undefined (Dengan Filter)

180

Saya memiliki templat yang mengikat yang menampilkan atribut model yang disebut 'tanggal' yang merupakan tanggal, menggunakan filter tanggal Angular.

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

Sejauh ini baik. Namun saat ini, jika tidak ada nilai di bidang tanggal, pengikatan tidak menampilkan apa pun. Namun, saya ingin menampilkan string 'Beragam' jika tidak ada tanggal.

Saya bisa mendapatkan logika dasar menggunakan operator biner:

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

Namun saya tidak dapat membuatnya berfungsi dengan filter tanggal:

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

Bagaimana saya bisa menggunakan operator biner di samping filter tanggal?

javascript templates binding angularjs default Gangguan
sumber

Jawaban:

293

Ternyata yang perlu saya lakukan adalah membungkus sisi kiri ekspresi dengan tanda kurung:

<span class="gallery-date">{{(gallery.date | date:'mediumDate') || "Various"}}</span>
Gangguan
sumber
12
Ini tidak berfungsi jika Anda perlu menampilkan nilai '0' di kolom
neel shah
6
@neelshah Tidak berfungsi jika Anda melakukan sesuatu seperti:{{(gallery.date | date:'mediumDate') || "0"}}
Rahil Wazir
2
Tidak berfungsi jika tanggal nol, bukannya tidak ditentukan, sayangnya. Tapi tetap saja trik yang bagus. Saya khawatir saya harus membuat filter khusus untuk kasus saya.
PhiLho
52

Saya membuat filter berikut:

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

        return input;
    }
});

Untuk digunakan seperti ini:

<span>{{aPrice | currency | ifEmpty:'N/A'}}</span>
<span>{{aNum | number:3 | ifEmpty:0}}</span>
Supergibbs
sumber
Ide yang luar biasa! Namun saya memperpanjang dan menggandakannya: membuat if (angular.isUndefined(defaultValue) || ... )pernyataan di dalam pernyataan yang ada, di mana defStringfilter mengembalikan string " default" (yang lain mungkin akan muncul nanti). Ini memungkinkan saya untuk menggunakannya sebagai <span>{{expected.string | defString}}</span>dan mendapatkan defaultsebagai tingkat fallback akhir.
37

Kalau-kalau Anda ingin mencoba sesuatu yang lain. Inilah yang bekerja untuk saya:

Berdasarkan pada Operator Ternary yang memiliki struktur sebagai berikut: 

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

Sebagai hasil:

{{gallery.date?(gallery.date | date:'mediumDate'):"Various" }}
Pol
sumber
1
Jawaban Pedr (13 Mei 13 pada 13:27, stackoverflow.com/a/16523266/1563880 ) hampir sama tetapi solusi Anda lebih eksplisit. Howerer, lebih banyak surat untuk ditulis)
nktssh
1
Ini lebih intuitif, terutama ketika datang dari latar belakang pemrograman. Operator ternary membuka jalan bagi Ifs sederhana.
asgs
2
maaf bertemu thread lama, tetapi solusi ini juga mungkin lebih berkinerja daripada jawaban yang diterima, karena tidak menyebut filter jika nilainya akan salah
SnailCoil
Ini juga lebih berguna ketika perlu bekerja dengan hierarki yang lebih dalam.
Bahkan Mien
8

Bagaimana saya bisa menggunakan operator biner di samping filter tanggal?

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

Anda juga mencoba:

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

Di cshtml Anda,

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

Di File JS Anda, mungkin app.js,

Di luar app.controller, tambahkan filter di bawah ini.

Di sini "tanggal saya" adalah fungsi yang Anda panggil untuk menguraikan tanggal. Di sini "app" adalah variabel yang berisi 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
sumber