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

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

本文关键字：Angularjs 默认值 过滤器 绑定 未定义 如果      更新时间：2023-09-26

我有一个模板绑定，它显示了一个名为'date'的模型属性，它是一个日期，使用了Angular的日期过滤器。

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

到目前为止一切顺利。但是目前，如果日期字段中没有值，绑定将不显示任何内容。但是，如果没有日期，我希望它显示字符串'各种'。

我可以使用二进制运算符得到基本逻辑:

<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;
    };
});
相关文章：