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.

回答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>

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

回答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.

回答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.

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

来源：https://stackoverflow.com/questions/15658535/how-to-display-placeholders-in-angularjs-for-undefined-expression-values

标签

javascript

angularjs

placeholder