javascript - 如果绑定空/未定义（带过滤器），Angularjs模板默认值

Question

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

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

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

Answer 1

原来我需要做的就是将表达式的左侧括在软括号中：

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

Answer 2

我做了以下过滤器：

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>

Answer 3

以防万一你想尝试别的东西。这对我有用：

基于具有以下结构的三元运算符：

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

结果：

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

Answer 4

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

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

你也试试：

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

Answer 5

我真的很喜欢这个答案，使用 ngBind，您的默认文本可以只存在于元素主体中，然后如果 ngBind 评估为非空/未定义的内容，您的内容将被自动替换，一切都很愉快

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

Answer 6

在你的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;
    };
});