如何在AngularJS中显示未定义expression式值的占位符?

如果我有一个expression式{{ x }}并且x undefined或为null ,那么我怎样才能显示一个占位符呢?

我在答复中提供了一个解决scheme,但我想知道还有其他的方法。 也许,也是承诺的承诺。

{{ counter || '?'}} {{ counter || '?'}} 。 只是纯粹的JavaScript。 || 可以用作默认值。 由于它们各自是不同的空信息,因此一般化的指令不适用于许多情况。

如果你想申请一个不同的类到空的,这也是内置的:

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

我会这样做,但也许有更好的办法:

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

然后使用{{ x | placeholdEmpty}} {{ x | placeholdEmpty}}

我用ng-show来做,就像这样:

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

当然,它增加了更多的元素给我的观点,我可能会有不同的处理。 我喜欢清楚地看到占位符/空值是多less,而且我也可以用不同的方式来devise它们。

实现defaultfilter:

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

并将其用作:

 {{ x | default: '?' }} 

滤波器解决scheme优于{{ x || '?'}} {{ x || '?'}}是你可以区分undefinednull0

实现默认ishfilter的作品,但如果你只使用数字,你可以使用angular度自己的数字filter

如果input为空或未定义,则只返回。 如果input是无限的(Infinity或-Infinity),则分别返回Infinity符号“∞”或“-∞”。 如果input不是数字,则返回空string。

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