How to display placeholders in AngularJS for undefined expression values?

Question

If I have an expression {{ x }} and x is undefined or null , then how can I display its placeholder?

I presented one solution in my answer, but I would like to know what other methods exist. Perhaps also for placeholder for promises.

Answer 1

{{ counter || '?'}} {{ counter || '?'}} . Just pure javascript. || can be used as the default value. Since in each case they would be different empty messages, the generalized directive is not suitable for many cases.

If you want to apply another class to empty ones, this is also built-in:

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

Answer 2

I would do it like this, but maybe there is a better way:

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

and then use {{ x | placeholdEmpty}} {{ x | placeholdEmpty}}

Answer 3

I do this with ng-show, for example:

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

Of course, this adds to me a lot more elements that I could handle in different ways. I like it though, as it’s easy to clearly see where my values ​​are placeholder / empty, and I can style them differently.

Answer 4

Implement default filter:

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

And use it like:

 {{ x | default: '?' }} 

The advantage of a filter solution over {{ x || '?'}} {{ x || '?'}} is that you can distinguish between undefined , null or 0 .

Answer 5

The default implementation of filters, but if you use only numbers, you can use angular's own numerical filter

If the input is null or undefined, it will just be returned. If the input is infinite (infinity or -Infinity), the infinity symbol "∞" or '-∞' is returned, respectively. If the input is not a number, an empty string is returned.

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