web-dev-qa-db-ja.com

バインドNULL /未定義の場合のAngularjsテンプレートのデフォルト値（フィルタあり）

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>

日付フィルターと一緒に二項演算子を使用するにはどうすればいいですか？

javascripttemplatesbindingangularjsdefault
167
Undistraction

式の左側をソフトな角括弧で囲むだけでよいのです。

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

私は以下のフィルタを作りました：

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>
53
Supergibbs

念のために、何か他のことを試してみたいのです。これは私のために働いたものです：

次の構造を持つ三項演算子に基づきます。

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

その結果、

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

日付フィルターと一緒に二項演算子を使用するにはどうすればいいですか？

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

あなたも試してみてください

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

NgBindを使えば、あなたのデフォルトのテキストは単に要素本体の中にあることができ、そしてngBindがnullでない/未定義のものに評価されれば、あなたのコンテンツは自動的に置き換えられます

angularjsは評価前に表示するデフォルト値を設定します

3
chrismarx