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

Question

如果我有一个表达式{{ x }}并且x是undefined或者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.