如果绑定为空/未定义(带过滤器),则Angularjs模板默认值

2020/10/20 23:21 · javascript ·  · 0评论

我有一个模板绑定,使用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>

如何在日期过滤器旁边使用二元运算符?

原来我要做的就是将表达式的左侧用软括号括起来:

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

我做了以下过滤:

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>

以防万一您想尝试其他方法。这对我有用:

基于三元运算符,其结构如下:

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

结果:

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

如何在日期过滤器旁边使用二元运算符?

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

您还可以尝试:

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

我真的很喜欢这个答案,使用ngBind,您的默认文本可以只存在于元素正文中,然后,如果ngBind的计算结果为非null / undefined,则您的内容会自动替换,一切都会很愉快

angularjs设置默认值以在评估之前显示

在您的cshtml中,

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

在您的JS文件中,也许是app.js,

在app.controller之外,添加以下过滤器。

在这里,“ mydate”是您用来解析日期的函数。这里的“ app”是包含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;
    };
});
本文地址:http://javascript.askforanswer.com/ruguobangdingweikong-weidingyidaiguolvqizeangularjsmobanmorenzhi.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!