javascript - formularios - ngif

Valor predeterminado de la plantilla Angularjs si vincula nulo/indefinido(con filtro)

Question

Tengo un enlace de plantilla que muestra un atributo del 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, en este momento, si no hay ningún 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?

Answer 1

En caso de que quieras probar algo más. Esto es lo que funcionó para mí:

Basado en Operador Ternario que tiene la siguiente estructura:

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

Como resultado:

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

Answer 2

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 usado así:

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

Answer 3

Me gustó mucho esta respuesta, con ngBind, tu texto predeterminado solo puede vivir en el cuerpo del elemento, y luego si el ngBind se evalúa como algo no nulo / indefinido, tu contenido se reemplaza automáticamente y todo está feliz.

angularjs configura los valores predeterminados para mostrar antes de la evaluación

Answer 4

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

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

Answer 5

¿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 intenta:

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