Come visualizzare i segnaposti in AngularJS per i valori di espressione non definiti?

Question

Se ho un'espressione {{ x }} e x è undefined o null, quindi come posso visualizzare un segnaposto per esso?

Ho fornito una soluzione nella mia risposta, ma mi piacerebbe sapere quali altri modi ci sono. Forse, anche per il segnaposto per le promesse.

Answer 1

{{ counter || '?'}}. Semplicemente javascript. || può essere utilizzato come valore predefinito. Poiché sarebbero diversi messaggi vuoti in ognuno, una direttiva generalizzata non sarebbe adatta per molti casi.

Se si desidera applicare una classe diversa da quelle vuote, che è anche built-in:

<div ng-class="{empty: !counter}" ng-bind="counter || ?"></div> 

Answer 2

vorrei fare in questo modo, ma forse c'è un modo migliore:

angular.module('app').filter('placeholdEmpty', function(){ 
    return function(input){ 
    if(!(input == undefined || input == null)){ 
     return input; 
    } else { 
     return "placeholder"; 
    } 
    } 
}); 

e quindi utilizzare {{ x | placeholdEmpty}}

Answer 3

lo faccio con ng-spettacolo, in questo modo:

<strong>{{username}}</strong> 
<span class="empty" ng-show="!username">N/A</span> 

Certo, aggiunge molti più elementi a mio avviso che potrei essere in grado di gestire in modo diverso. Mi piace però quanto sia facile vedere chiaramente dove sono il mio segnaposto/i valori vuoti, e posso anche modificarli in modo diverso.

Answer 4

Implementare default filtro:

app.filter('default', function(){ 
    return function(value, def) { 
    return (value === undefined || value === null? def : value); 
    }; 
}); 

e usarlo come:

{{ x | default: '?' }} 

Il vantaggio della soluzione di filtro su {{ x || '?'}} è che è possibile distinguere tra undefined, null o 0.

Answer 5

Implementazione di filtri predefiniti-ish funziona, ma se si sta utilizzando solo i numeri si può usare di propria angolare number filter

Se l'input è null o undefined, sarà solo essere restituito. Se l'input è infinito (Infinity o -Infinity), viene restituito il simbolo Infinito '∞' o '-∞', rispettivamente. Se l'input non è un numero, viene restituita una stringa vuota .

{{ (val | number) || "Number not provided"}}