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

Sachasachem

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>

Alonzo

FWIW, make sure to put the default value before any filters (e.g. {{ counter || '?' | myfilter }}). – Conjoin

This answer is simple and clean, but the drawback is that it will not only display the placeholder on null and undefined, but also on 0, which can be a valid value. – Myrtismyrtle

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

Sachasachem

The advantage of the filter solution over {{ counter || '?'}} is that you can distinguish between undefined, null or zero. – Distichous

Another important advantage of placeholder filter is that in future, you can easily change the placeholder text, if you decide that you dont like '?'... – Anklet

And how do you apply a filter to x? – Festatus

@JustGoscha ..Works Perfect..Thanks – Uncovered

This filter doesn't allow to provide the default without modifying the filter. Look at @naXa answer below. – Harebrained

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.

Language

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.

Outofdate

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

Courier

Thanks! This works with ng-bind="(val | number) || 'Default'" as well! – Harebrained