web-dev-qa-db-fra.com

Comment afficher les espaces réservés dans AngularJS pour les valeurs d'expression non définies?

Si j'ai une expression {{ x }} et x est undefined ou null, alors comment puis-je afficher un espace réservé pour celui-ci?

J'ai fourni une solution dans ma réponse, mais j'aimerais savoir de quelle autre manière il existe. Peut-être aussi pour l'espace réservé aux promesses.

javascriptangularjsplaceholder
61
JustGoscha

{{ counter || '?'}}. Juste du javascript pur. || peut être utilisé comme valeur par défaut. Puisqu'il s'agirait de messages vides différents dans chacun, une directive généralisée ne conviendrait pas dans de nombreux cas.

Si vous souhaitez appliquer une classe différente aux classes vides, c'est également intégré:

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

Je le ferais comme ça, mais peut-être qu'il y a une meilleure façon:

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

puis utilisez {{ x | placeholdEmpty}}

25
JustGoscha

Je le fais avec ng-show, comme ceci:

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

Bien sûr, cela ajoute beaucoup plus d'éléments à mon point de vue que je pourrais peut-être gérer différemment. J'aime bien à quel point il est facile de voir clairement où se trouvent mes valeurs d'espace réservé/vides, et je peux également les styler différemment.

13
jszobody

Implémentez le filtre default:

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

Et utilisez-le comme:

{{ x | default: '?' }}

L'avantage de la solution filtrante sur {{ x || '?'}} est que vous pouvez faire la distinction entre undefined, null ou 0.

5
naXa

L'implémentation de filtres par défaut fonctionne, mais si vous n'utilisez que des nombres, vous pouvez utiliser les propres angulaires filtre numérique

Si l'entrée est nulle ou non définie, elle sera simplement renvoyée. Si l'entrée est infinie (Infinity ou -Infinity), le symbole Infinity '∞' ou '-∞' est retourné, respectivement. Si l'entrée n'est pas un nombre, une chaîne vide est renvoyée.

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