ChatGPT解决这个技术问题 Extra ChatGPT

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?


0
0xcaff

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>

This doesn't work if you need to display a '0' value in column
@neelshah It does work if you do something like: {{(gallery.date | date:'mediumDate') || "0"}}
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.
S
Supergibbs

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>

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.
P
Pol

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

Pedr's answer (May 13 '13 at 13:27, stackoverflow.com/a/16523266/1563880) is almost the same but yours solution is more explicit. Howerer, more letters to write)
This is more intuitive, especially when coming from a programming background. Ternary operators pave way for simple If else Ifs.
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
This is also more useful when needing to work with deeper hierarchies.
R
Rizwan

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>

C
Community

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


M
Mohamedasiq

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