Valeur par défaut du modèle Angularjs si la liaison est Null / Undefined (avec filtre)


180

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

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

Jusqu'ici tout va bien. Cependant, pour le moment, s'il n'y a aucune valeur dans le champ de date, la liaison n'affiche rien. Cependant, je voudrais 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 avec le filtre de date?

Réponses:


293

Il s'est avéré que tout ce que j'avais à faire était d'envelopper le côté gauche de l'expression entre crochets souples:

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

12
Cela ne fonctionne pas si vous devez afficher une valeur '0' dans la colonne
— neel shah

6
@neelshah Cela fonctionne si vous faites quelque chose comme:{{(gallery.date | date:'mediumDate') || "0"}}
— Rahil Wazir

2
Ne fonctionne pas si la date est égale à zéro au lieu d'indéfini, hélas. Encore un bon truc, cependant. J'ai peur de devoir créer un filtre personnalisé pour mon cas.
— PhiLho

52

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

A utiliser comme ceci:

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

Super idée en effet! Je l'ai cependant étendu et dupliqué un peu: imbriquer une if (angular.isUndefined(defaultValue) || ... )instruction à l'intérieur de l'existant, à travers laquelle le defStringfiltre renvoie la chaîne " default" (d'autres viendront probablement plus tard). Cela me permet de l'utiliser comme <span>{{expected.string | defString}}</span>et d'obtenir defaultle niveau de secours final.

37

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

1
La réponse de Pedr (13 mai 13 à 13:27, stackoverflow.com/a/16523266/1563880 ) est presque la même mais votre solution est plus explicite. Howerer, plus de lettres à écrire)
— nktssh

1
C'est plus intuitif, surtout quand on vient d'un arrière-plan de programmation. Les opérateurs ternaires ouvrent la voie à de simples If else.
— asgs

2
désolé de heurter un ancien thread, mais cette solution est probablement aussi plus performante que la réponse acceptée, car elle n'appelle pas le filtre si la valeur devient false
— SnailCoil

Ceci est également plus utile lorsque vous devez travailler avec des hiérarchies plus profondes.
— Even Mien

8

Comment puis-je utiliser l'opérateur binaire avec le filtre de date?

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

vous essayez également:

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


0

Dans votre cshtml,

<tr ng-repeat="value in Results">                
 <td>{{value.FileReceivedOn | mydate | date : 'dd-MM-yyyy'}} </td>
</tr>

Dans votre fichier JS, peut-être app.js,

En dehors de app.controller, ajoutez le filtre ci-dessous.

Ici, "mydate" est la fonction que vous appelez pour analyser la date. Ici, "app" est la variable qui contient le module angular.

app.filter("mydate", function () {
    var re = /\/Date\(([0-9]*)\)\//;
    return function (x) {
        var m = x.match(re);
        if (m) return new Date(parseInt(m[1]));
        else return null;
    };
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.