Valor predeterminado de la plantilla Angularjs si el enlace es nulo / indefinido (con filtro)

180

Tengo un enlace de plantilla que muestra un atributo de modelo llamado 'fecha' que es una fecha, usando el filtro de fecha de Angular.

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

Hasta aquí todo bien. Sin embargo, por el momento, si no hay valor en el campo de fecha, el enlace no muestra nada. Sin embargo, me gustaría que muestre la cadena 'Varios' si no hay fecha.

Puedo obtener la lógica básica usando un operador binario:

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

Sin embargo, no puedo hacer que funcione con el filtro de fecha:

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

¿Cómo puedo usar el operador binario junto con el filtro de fecha?

javascript templates binding angularjs default Distracción
fuente

Respuestas:

293

Resulta que todo lo que necesitaba hacer era envolver el lado izquierdo de la expresión entre paréntesis suaves:

<span class="gallery-date">{{(gallery.date | date:'mediumDate') || "Various"}}</span>
Distracción
fuente
12
Esto no funciona si necesita mostrar un valor '0' en la columna
neel shah
66
@neelshah Funciona si haces algo como:{{(gallery.date | date:'mediumDate') || "0"}}
Rahil Wazir
2
No funciona si la fecha es cero en lugar de indefinida, por desgracia. Sin embargo, sigue siendo un buen truco. Me temo que tengo que hacer un filtro personalizado para mi caso.
PhiLho
52

Hice el siguiente filtro:

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

        return input;
    }
});

Para ser utilizado así:

<span>{{aPrice | currency | ifEmpty:'N/A'}}</span>
<span>{{aNum | number:3 | ifEmpty:0}}</span>
Supergibbs
fuente
Impresionante idea de hecho! Sin embargo, lo extendí y dupliqué un poco: anidando una if (angular.isUndefined(defaultValue) || ... )declaración dentro de la existente, a través de la cual el defStringfiltro devuelve la cadena " default" (probablemente vendrán otros más adelante). Esto me permite usarlo <span>{{expected.string | defString}}</span>y obtener defaultel nivel de respaldo final.
37

Por si acaso quieres probar otra cosa. Esto es lo que funcionó para mí:

Basado en el operador ternario que tiene la siguiente estructura: 

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

Como resultado:

{{gallery.date?(gallery.date | date:'mediumDate'):"Various" }}
Pol
fuente
1
La respuesta de Pedr (13 de mayo de 13 a 13:27, stackoverflow.com/a/16523266/1563880 ) es casi la misma, pero su solución es más explícita. Howerer, más cartas para escribir)
nktssh
1
Esto es más intuitivo, especialmente cuando proviene de un fondo de programación. Los operadores ternarios allanan el camino para Ifs Ifs simples.
pregunta el
2
Lamento encontrar un hilo viejo, pero esta solución también es probablemente más eficaz que la respuesta aceptada, porque no llama al filtro si el valor saldrá falso
SnailCoil
Esto también es más útil cuando se necesita trabajar con jerarquías más profundas.
Incluso Mien
8

¿Cómo puedo usar el operador binario junto con el filtro de fecha?

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

también intentas:

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

En tu cshtml,

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

En su archivo JS, tal vez app.js,

Fuera de app.controller, agregue el siguiente filtro.

Aquí "mydate" es la función que está llamando para analizar la fecha. Aquí la "aplicación" es la variable que contiene el módulo 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
fuente