Как отображать заполнители в AngularJS для значений выражения undefined?

Если у меня есть выражение {{ x }}, а x - undefined или null, то как я могу отобразить его заполнитель?

Я представил одно решение в своем ответе, но я хотел бы знать, какие существуют другие способы. Возможно, также для placeholder для promises.

Ответ 1

{{ counter || '?'}}. Просто чистый javascript. || может использоваться как значение по умолчанию. Поскольку в каждом случае это были бы разные пустые сообщения, обобщенная директива не подходит для многих случаев.

Если вы хотите применить другой класс к пустым, это также встроенное:

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

Ответ 2

Я бы сделал это так, но, возможно, есть лучший способ:

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

а затем используйте {{ x | placeholdEmpty}}

Ответ 3

Я делаю это с помощью ng-show, например:

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

Конечно, это добавляет мне гораздо больше элементов, которые я мог бы обрабатывать по-разному. Мне нравится, хотя, как легко ясно видеть, где мои значения placeholder/empty, и я могу их стиль по-другому.

Ответ 4

Внедрить фильтр default:

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

И используйте его как:

{{ x | default: '?' }}

Преимущество решения фильтра над {{ x || '?'}} заключается в том, что вы можете различать undefined, null или 0.

Ответ 5

Реализация фильтров по умолчанию, но если вы используете только номера, вы можете использовать angular собственный числовой фильтр

Если ввод равен null или undefined, он будет просто возвращен. Если вход бесконечен (бесконечность или -Infinity), символ бесконечности "∞" или '-∞' возвращается соответственно. Если вход не является числом пустым строка возвращается.

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