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




formularios en (5)

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?


Answers

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


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>

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>

  1. El enlace de datos unidireccional es un enfoque en el que se toma un valor del modelo de datos y se inserta en un elemento HTML. No hay manera de actualizar el modelo desde la vista. Se utiliza en sistemas de plantillas clásicas. Estos sistemas enlazan datos en una sola dirección.

  2. El enlace de datos en aplicaciones angulares es la sincronización automática de datos entre el modelo y los componentes de vista.

El enlace de datos le permite tratar el modelo como la única fuente de verdad en su aplicación. La vista es una proyección del modelo en todo momento. Si se cambia el modelo, la vista refleja el cambio y viceversa.





javascript templates binding angularjs default