CODEWITHSUNDEEP
javascripttemplatesbindingangularjsdefault
Undistraction
Undistraction

Reputation: 43401

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.

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

Upvotes: 194

Views: 192605

Answers (6)

Mohamedasiq
Mohamedasiq

Reputation: 91

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;
    };
});

Upvotes: 1

Rizwan
Rizwan

Reputation: 4463

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>

Upvotes: 9

chrismarx
chrismarx

Reputation: 12575

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

Upvotes: 3

Supergibbs
Supergibbs

Reputation: 1470

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>

Upvotes: 54

Pol
Pol

Reputation: 25585

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

Upvotes: 41

Undistraction
Undistraction

Reputation: 43401

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>

Upvotes: 315

Related Questions