javascript - 如何在 AngularJS 中为未定义的表达式值显示占位符？

Question

如果我有一个表达式{{ x }}并且 x 是undefinedor null，那么我该如何显示它的占位符？

我在回答中提供了一种解决方案，但我想知道还有哪些其他方法。也许，也适用于承诺的占位符。

Answer 1

{{ counter || '?'}}. 只是纯JavaScript。||可以用作默认值。由于每个中的空消息不同，因此通用指令不适用于许多情况。

如果您想将不同的类应用于空类，它也是内置的：

<div ng-class="{empty: !counter}" ng-bind="counter || ?"></div>

Answer 2

我会这样做，但也许有更好的方法：

angular.module('app').filter('placeholdEmpty', function(){
  return function(input){
    if(!(input == undefined || input == null)){
      return input;
    } else {
      return "placeholder";
    }
  }
});

然后使用{{ x | placeholdEmpty}}

Answer 3

我用 ng-show 来做，像这样：

<strong>{{username}}</strong>
<span class="empty" ng-show="!username">N/A</span>

当然，它为我的观点添加了更多我可能能够以不同方式处理的元素。我喜欢清楚地看到我的占位符/空值在哪里是多么容易，而且我也可以为它们设置不同的样式。

Answer 4

实现default过滤器：

app.filter('default', function(){
  return function(value, def) {
    return (value === undefined || value === null? def : value);
  };
});

并将其用作：

{{ x | default: '?' }}

过滤器解决方案的优势{{ x || '?'}}在于您可以区分undefined,null或0。

Answer 5

实现默认过滤器是可行的，但如果你只使用数字，你可以使用 Angular 自己的数字过滤器

如果输入为 null 或未定义，它将被返回。如果输入是无限的（Infinity 或 -Infinity），则分别返回 Infinity 符号“∞”或“-∞”。如果输入不是数字，则返回空字符串。

{{ (val | number ) || "Number not provided"}}