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

Posted 2023-03-05

【中文标题】如何在 AngularJS 中为未定义的表达式值显示占位符？

【英文标题】：How to display placeholders in AngularJS for undefined expression values?

【发布时间】：2013-03-17 12:22:16

【问题描述】：

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

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

【参考方案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'" ！