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?

— Gangguan
sumber

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

3

Saya sangat menyukai jawaban ini, dengan ngBind, teks default Anda hanya dapat hidup di badan elemen, dan kemudian jika ngBind mengevaluasi sesuatu yang bukan nol / tidak terdefinisi, konten Anda diganti secara otomatis, dan semuanya bahagia

angularjs mengatur nilai default untuk ditampilkan sebelum evaluasi

— chrismarx
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