How to display placeholders in AngularJS for undefined expression values?

Question

How to display placeholders in AngularJS for undefined expression values?

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 in my answer, but I would like to know what other ways there are. Maybe, also for placeholder for promises.

javascript
angularjs
placeholder

Answer 1

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

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.