Если у меня есть выражение {{ x }}, а x - undefined или null, то как я могу отобразить его заполнитель?
Я представил одно решение в своем ответе, но я хотел бы знать, какие существуют другие способы. Возможно, также для placeholder для promises.
{{ counter || '?'}}.
Просто чистый javascript. || может использоваться как значение по умолчанию. Поскольку в каждом случае это были бы разные пустые сообщения, обобщенная директива не подходит для многих случаев.
Если вы хотите применить другой класс к пустым, это также встроенное:
<div ng-class="{empty: !counter}" ng-bind="counter || ?"></div>
Я бы сделал это так, но, возможно, есть лучший способ:
angular.module('app').filter('placeholdEmpty', function(){
return function(input){
if(!(input == undefined || input == null)){
return input;
} else {
return "placeholder";
}
}
});
а затем используйте {{ x | placeholdEmpty}}
Я делаю это с помощью ng-show, например:
<strong>{{username}}</strong>
<span class="empty" ng-show="!username">N/A</span>
Конечно, это добавляет мне гораздо больше элементов, которые я мог бы обрабатывать по-разному. Мне нравится, хотя, как легко ясно видеть, где мои значения placeholder/empty, и я могу их стиль по-другому.
Внедрить фильтр default:
app.filter('default', function(){
return function(value, def) {
return (value === undefined || value === null? def : value);
};
});
И используйте его как:
{{ x | default: '?' }}
Преимущество решения фильтра над {{ x || '?'}} заключается в том, что вы можете различать undefined, null или 0.
Реализация фильтров по умолчанию, но если вы используете только номера, вы можете использовать angular собственный числовой фильтр
Если ввод равен null или undefined, он будет просто возвращен. Если вход бесконечен (бесконечность или -Infinity), символ бесконечности "∞" или '-∞' возвращается соответственно. Если вход не является числом пустым строка возвращается.
{{ (val | number ) || "Number not provided"}}