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

我有一个模板绑定，显示一个名为“日期”的模型属性，这是一个日期，使用 Angular 的日期过滤器。

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

目前为止还不错。但是目前，如果 date 字段中没有值，绑定将不显示任何内容。但是，如果没有日期，我希望它显示字符串“众多”。

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

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

然而，我无法让它与日期过滤器工作:

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

如何在日期过滤器旁边使用二进制运算符？

186315 次浏览
小开
最佳答案

结果我所需要做的就是把表达式的左边用软括号括起来:

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

以防你想试试别的，这招对我很管用:

基于三元算子，其结构如下:

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

结果是:

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

我做了以下过滤器:

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>
小开

我非常喜欢这个答案，对于 ngBind，默认的文本只能存在于元素体中，然后如果 ngBind 的值为非 null/未定义的，那么您的内容将被自动替换，一切都很顺利

Angularjs 设置计算前显示的默认值

小开

如何在日期过滤器旁边使用二进制运算符？

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

你也可以试试:

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

在你的国家实验室里,

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

提交答案