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

【问题标题】：How to display placeholders in AngularJS for undefined expression values?如何在 AngularJS 中为未定义的表达式值显示占位符？
【发布时间】：2013-03-17 12:22:16
【问题描述】：

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

我在回答中提供了一种解决方案，但我想知道还有哪些其他方法。也许，也可以作为 Promise 的占位符。

【问题讨论】：

标签： javascript angularjs placeholder

【解决方案1】：

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

如果你想对空类应用不同的类，这也是内置的：

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

【讨论】：

FWIW，确保将默认值放在任何过滤器之前（例如 {{ counter || '?' | myfilter }}）。
这个答案简单明了，但缺点是它不仅会在null和undefined上显示占位符，还会在0上显示占位符，这可能是一个有效值。

【解决方案2】：

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

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

然后使用{{ x | placeholdEmpty}}

【讨论】：

过滤解决方案优于{{ counter || '?'}} 是可以区分 undefined、null 或 0 的。
占位符过滤器的另一个重要优点是，将来，如果您决定不喜欢“？”，您可以轻松更改占位符文本...
你如何对 x 应用过滤器？
@JustGoscha ..完美运行..谢谢
此过滤器不允许在不修改过滤器的情况下提供默认值。看看下面的@naXa 答案。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

实现default过滤器：

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

并将其用作：

{{ x | default: '?' }}

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

谢谢！这也适用于 ng-bind="(val | number) || 'Default'" ！