Jak wyświetlić elementy zastępcze w AngularJS dla niezdefiniowanych wartości wyrażeń?

Question

Jeśli mam wyrażenie {{ x }}, a x to undefined lub null, to w jaki sposób mogę wyświetlić dla niego element zastępczy?

Podałem jedno rozwiązanie w mojej odpowiedzi, ale chciałbym wiedzieć, jakie są inne sposoby. Może, także jako symbol zastępczy dla obietnic.

Answer 1

{{ counter || '?'}}. Po prostu czysty javascript. || może być użyty jako wartość domyślna. Ponieważ w każdym z nich byłyby różne puste komunikaty, uogólniona dyrektywa nie byłaby odpowiednia dla wielu przypadków.

Jeśli chcesz zastosować inną klasę do pustych, który jest również wbudowany w:

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

Answer 2

chciałbym zrobić to w ten sposób, ale być może istnieje lepszy sposób:

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

a następnie użyć {{ x | placeholdEmpty}}

Answer 3

robię to z NG-show, jak to:

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

Oczywiście, dodaje on dużo więcej elementów do mojego widoku, co może być w stanie obsłużyć inaczej. Podoba mi się jednak, jak łatwo jest jasno zobaczyć, gdzie są moje puste miejsca/puste wartości, a także mogę je inaczej stylizować.

Answer 4

Wdrożenie default filtr:

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

i używać go jako:

{{ x | default: '?' }} 

Zaletą rozwiązania filtrującego w porównaniu z {{ x || '?'}} jest to, że można odróżnić undefined, null lub 0.

Answer 5

Wdrożenie domyślne filtry-owski działa, ale jeśli używasz tylko cyfry można użyć kątowy własnego number filter

Jeśli wejście jest null lub undefined, to po prostu być zwrócone. Jeśli wejście jest nieskończone (Infinity lub -Infinity), zwracany jest symbol Infinity "∞" lub "-∞". Jeśli wejście nie jest liczbą, zwracany jest pusty ciąg znaków .

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