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

Question

I have a template binding that displays a model attribute called 'date' which is a date, using Angular's date filter.

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

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:

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

However I can't get it to work with the date filter:

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

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

Cephalopod

Answer 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>

Cephalopod

This doesn't work if you need to display a '0' value in column – Leitmotif

@neelshah It does work if you do something like: {{(gallery.date | date:'mediumDate') || "0"}} – Unwelcome

Doesn't work if date is zero instead of undefined, alas. Still a good trick, though. I fear I have to make a custom filter for my case. – Asleyaslope

Answer 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:

<span>{{aPrice | currency | ifEmpty:'N/A'}}</span>
<span>{{aNum | number:3 | ifEmpty:0}}</span>

Rope

Awesome idea indeed! I extended and duplicated it a bit though: nesting a if (angular.isUndefined(defaultValue) || ... ) statement inside the existing one, through which the defString filter returns the string "default" (others will probably come later). This allows me to use it as <span>{{expected.string | defString}}</span> and get default as the final fallback level. – Cerebral

Answer 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" }}

Fraternize

Pedr's answer (May 13 '13 at 13:27, https://mcmap.net/q/48591/-angularjs-template-default-value-if-binding-null-undefined-with-filter) is almost the same but yours solution is more explicit. Howerer, more letters to write) – Lovely

This is more intuitive, especially when coming from a programming background. Ternary operators pave way for simple If else Ifs. – Kelikeligot

sorry to bump an old thread, but this solution is also probably more performant than the accepted answer, because it doesn't call the filter if the value will come up false – Adjournment

This is also more useful when needing to work with deeper hierarchies. – Shari

Answer 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>

Radtke

Answer 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

Karleenkarlen

Answer 6

In your cshtml,

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

In Your JS File, maybe app.js,

Outside of app.controller, add the below filter.

Here the "mydate" is the function which you are calling for parsing the date. Here the "app" is the variable which contains the 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;
    };
});

Ciliata