Valor padrão do modelo Angularjs se vinculando nulo / indefinido (com filtro)

180

Eu tenho uma ligação de modelo que exibe um atributo de modelo chamado 'date', que é uma data, usando o filtro de data do Angular.

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

Por enquanto, tudo bem. No entanto, no momento, se não houver valor no campo data, a ligação não exibirá nada. No entanto, gostaria que ele exibisse a string 'Various' se não houver data.

Eu posso obter a lógica básica usando um operador binário:

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

No entanto, não consigo trabalhar com o filtro de data:

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

Como posso usar o operador binário ao lado do filtro de data?

Undistraction
fonte

Respostas:

293

Acontece que tudo que eu precisava fazer era envolver o lado esquerdo da expressão entre colchetes suaves:

<span class="gallery-date">{{(gallery.date | date:'mediumDate') || "Various"}}</span>
Undistraction
fonte
12
Isso não funciona se você precisa exibir um valor '0' na coluna
xá Neel
6
@neelshah Ele faz o trabalho se você fizer algo como:{{(gallery.date | date:'mediumDate') || "0"}}
Rahil Wazir
2
Não funciona se a data for zero em vez de indefinida, infelizmente. Ainda é um bom truque, no entanto. Receio ter que criar um filtro personalizado para o meu caso.
PhiLho
52

Eu fiz o seguinte 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 assim:

<span>{{aPrice | currency | ifEmpty:'N/A'}}</span>
<span>{{aNum | number:3 | ifEmpty:0}}</span>
Supergibbs
fonte
Idéia impressionante de fato! Eu o estendi e dupliquei um pouco: aninhando uma if (angular.isUndefined(defaultValue) || ... )instrução dentro da existente, através da qual o defStringfiltro retorna a string " default" (outras provavelmente virão mais tarde). Isso me permite usá-lo como <span>{{expected.string | defString}}</span>e obter defaultcomo o nível final de fallback.
37

Apenas no caso de você querer tentar outra coisa. Isto é o que funcionou para mim:

Baseado no operador ternário, que possui a seguinte estrutura:

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

Como resultado:

{{gallery.date?(gallery.date | date:'mediumDate'):"Various" }}
Pol
fonte
1
A resposta de Pedr (13 de maio de 13 às 13:27, stackoverflow.com/a/16523266/1563880 ) é quase a mesma, mas a sua solução é mais explícita. Howerer, mais letras para escrever)
nktssh
1
Isso é mais intuitivo, especialmente quando proveniente de um plano de programação. Os operadores ternários preparam o caminho para Ifs simples.
ASGs
2
desculpe a bater uma discussão antiga, mas esta solução também é provavelmente mais eficaz do que a resposta aceita, porque não chama o filtro se o valor vai chegar a falsa
SnailCoil
Isso também é mais útil quando é necessário trabalhar com hierarquias mais profundas.
Mesmo Mien
8

Como posso usar o operador binário ao lado do filtro de data?

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

você também tenta:

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

No seu cshtml,

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

No seu arquivo JS, talvez app.js,

Fora do app.controller, adicione o filtro abaixo.

Aqui, a "minha data" é a função que você está chamando para analisar a data. Aqui, o "app" é a variável que contém o angular.module

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
fonte