web-dev-qa-db-fra.com

Valeur par défaut du modèle Angularjs si la liaison est nulle / non définie (avec filtre)

J'ai un modèle de liaison qui affiche un attribut de modèle appelé "date" qui est une date, en utilisant le filtre de date d'Angular.

<span class="gallery-date">{{gallery.date | date:'mediumDate'}}</span>

Jusqu'ici tout va bien. Cependant, pour le moment, s'il n'y a pas de valeur dans le champ de date, la liaison n'affiche rien. Cependant, j'aimerais qu'il affiche la chaîne "Divers" s'il n'y a pas de date.

Je peux obtenir la logique de base en utilisant un opérateur binaire:

<span class="gallery-date">{{gallery.date || 'Various'}}</span>

Cependant, je ne peux pas le faire fonctionner avec le filtre de date:

<span class="gallery-date">{{gallery.date | date:'mediumDate' || "Various"}}</span>

Comment puis-je utiliser l'opérateur binaire à côté du filtre de date?

javascripttemplatesbindingangularjsdefault
168
Undistraction

Il s’est avéré que tout ce que je devais faire était d’envelopper le côté gauche de l’expression entre crochets:

<span class="gallery-date">{{(gallery.date | date:'mediumDate') || "Various"}}</span>
280
Undistraction

J'ai fait le filtre suivant:

angular.module('app').filter('ifEmpty', function() {
    return function(input, defaultValue) {
        if (angular.isUndefined(input) || input === null || input === '') {
            return defaultValue;
        }

        return input;
    }
});

Pour être utilisé comme ceci:

<span>{{aPrice | currency | ifEmpty:'N/A'}}</span>
<span>{{aNum | number:3 | ifEmpty:0}}</span>
53
Supergibbs

Juste au cas où vous voudriez essayer autre chose. C'est ce qui a fonctionné pour moi:

Basé sur l'opérateur ternaire qui a la structure suivante:

condition ? value-if-true : value-if-false

À la suite:

{{gallery.date?(gallery.date | date:'mediumDate'):"Various" }}
35
Pol

Comment puis-je utiliser l'opérateur binaire à côté du filtre de date?

<span class="gallery-date">{{gallery.date | date:'mediumDate' || "Date Empty"}}</span>

vous essayez aussi:

<span class="gallery-date">{{ gallery.date == 'NULL' ? 'mediumDate' : "gallery.date"}}</span>
8
Rizo

J'ai vraiment aimé cette réponse, avec ngBind, votre texte par défaut peut simplement résider dans le corps de l'élément, puis si ngBind est évalué comme quelque chose de non-null/indéfini, votre contenu est remplacé automatiquement et tout le reste heureux.

angularjs définissant les valeurs par défaut à afficher avant l'évaluation

3
chrismarx