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

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

я предоставил одно решение в своем ответе, но я хотел бы знать, какие есть другие способы. Может быть, также для заполнителя для обещаний.

5 61
javascript angularjs placeholder

5 ответов:

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

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

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

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

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

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

25

Я делаю это с ng-show, вот так:

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

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

13

реализовать default фильтр:

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

и использовать его как: 

{{ x | default: '?' }}

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

5

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

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

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