Angularの日付フィルタを使用して、日付である 'date'というモデル属性を表示するテンプレートバインディングがあります。
<span class="gallery-date">{{gallery.date | date:'mediumDate'}}</span>
ここまでは順調ですね。ただし現時点で、日付フィールドに値がない場合、バインディングには何も表示されません。ただし、日付がない場合は、 'Various'という文字列を表示します。
二項演算子を使用して基本的なロジックを取得できます。
<span class="gallery-date">{{gallery.date || 'Various'}}</span>
しかし、私はそれが日付フィルタで動作するようにすることはできません:
<span class="gallery-date">{{gallery.date | date:'mediumDate' || "Various"}}</span>
日付フィルターと一緒に二項演算子を使用するにはどうすればいいですか?
式の左側をソフトな角括弧で囲むだけでよいのです。
<span class="gallery-date">{{(gallery.date | date:'mediumDate') || "Various"}}</span>
私は以下のフィルタを作りました:
angular.module('app').filter('ifEmpty', function() {
return function(input, defaultValue) {
if (angular.isUndefined(input) || input === null || input === '') {
return defaultValue;
}
return input;
}
});
このように使用するには:
<span>{{aPrice | currency | ifEmpty:'N/A'}}</span>
<span>{{aNum | number:3 | ifEmpty:0}}</span>
念のために、何か他のことを試してみたいのです。これは私のために働いたものです:
次の構造を持つ三項演算子に基づきます。
condition ? value-if-true : value-if-false
その結果、
{{gallery.date?(gallery.date | date:'mediumDate'):"Various" }}
日付フィルターと一緒に二項演算子を使用するにはどうすればいいですか?
<span class="gallery-date">{{gallery.date | date:'mediumDate' || "Date Empty"}}</span>
あなたも試してみてください
<span class="gallery-date">{{ gallery.date == 'NULL' ? 'mediumDate' : "gallery.date"}}</span>
NgBindを使えば、あなたのデフォルトのテキストは単に要素本体の中にあることができ、そしてngBindがnullでない/未定義のものに評価されれば、あなたのコンテンツは自動的に置き換えられます