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 a placeholder for it?

I provided one solution

Answer 1

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}}

Answer 2

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

If you want to apply a different class to empty ones, that's also built-in:

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

Answer 3

I do it with ng-show, like this:

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

Sure, it adds a lot more elements to my view that I might be able to handle differently. I like though how easy it is to clearly see where my placeholder/empty values are, and I can style them differently as well.

Answer 4

Implement default filter:

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

And use it as:

{{ x | default: '?' }}

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

Answer 5

Implementing default-ish filters works, but if you're using only numbers you can use angular's own number 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"}}