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?

javascript templates binding angularjs default Undistraction
la source

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>
Undistraction
la source
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>
Supergibbs
la source
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" }}
Pol
la source
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>
Rizo
la source
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;
    };
});
Mohamedasiq
la source