Angularjs Template Default Value if Binding Null / Undefined (With Filter)

Angularjs Template Default Value if Binding Null / Undefined (With Filter)

I have a template binding that displays a model attribute called ‘date’ which is a date, using Angular’s date filter.
{{gallery.date | date:’mediumDate’}}

So far so good. However at the moment, if there is no value in the date field, the binding displays nothing. However, I would like it to display the string ‘Various’ if there is no date.
I can get the basic logic using a binary operator:
{{gallery.date || ‘Various’}}

However I can’t get it to work with the date filter:
{{gallery.date | date:’mediumDate’ || “Various”}}

How can I use the binary operator alongside the date filter?

Solutions/Answers:

Solution 1:

Turns out all I needed to do was wrap the left-hand side of the expression in soft brackets:

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

Solution 2:

I made the following filter:

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

        return input;
    }
});

To be used like this:

Related:  Creating a JSON dynamically with each input value using jquery
<span>{{aPrice | currency | ifEmpty:'N/A'}}</span>
<span>{{aNum | number:3 | ifEmpty:0}}</span>

Solution 3:

Just in case you want to try something else. This is what worked for me:

Based on Ternary Operator which has following structure:

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

As result:

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

Solution 4:

How can I use the binary operator alongside the date filter?

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

you also try:

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

Solution 5:

I really liked this answer, with ngBind, your default text can just live in the element body, and then if the ngBind evaluates to something non-null/undefined, your content is replaced automatically, and everythings happy

angularjs setting default values to display before evaluation