Значение по умолчанию для шаблона Angularjs, если Binding Null / Undefined (с фильтром)

180

У меня есть привязка шаблона, которая отображает атрибут модели под названием «дата», который является датой, с использованием фильтра даты Angular.

<span class="gallery-date">{{gallery.date | date:'mediumDate'}}</span>

Все идет нормально. Однако в данный момент, если в поле даты нет значения, привязка ничего не отображает. Тем не менее, я хотел бы, чтобы отображалась строка «Разное», если нет даты.

Я могу получить основную логику, используя бинарный оператор:

<span class="gallery-date">{{gallery.date || 'Various'}}</span>

Однако я не могу заставить его работать с фильтром даты:

<span class="gallery-date">{{gallery.date | date:'mediumDate' || "Various"}}</span>

Как я могу использовать бинарный оператор вместе с фильтром даты?

— Undistraction
источник

293

Оказывается, все, что мне нужно было сделать, это обернуть левую часть выражения в мягкие скобки:

<span class="gallery-date">{{(gallery.date | date:'mediumDate') || "Various"}}</span>

— Undistraction
источник

12

Это не работает, если вам нужно отобразить значение '0' в столбце

— neel shah

6

@neelshah Это работает, если вы делаете что-то вроде:{{(gallery.date | date:'mediumDate') || "0"}}

— Рахиль Вазир

2

Не работает, если дата равна нулю вместо неопределенного, увы. Тем не менее, хороший трюк. Боюсь, мне нужно сделать собственный фильтр для моего случая.

— PhiLho

52

Я сделал следующий фильтр:

angular.module('app').filter('ifEmpty', function() {
    return function(input, defaultValue) {
        if (angular.isUndefined(input) || input === null || input === '') {
            return defaultValue;
        }

        return input;
    }
});

Быть использованным так:

<span>{{aPrice | currency | ifEmpty:'N/A'}}</span>
<span>{{aNum | number:3 | ifEmpty:0}}</span>

— Supergibbs
источник

Действительно потрясающая идея! Я немного расширил и продублировал его: вложив if (angular.isUndefined(defaultValue) || ... )оператор внутри существующего, через который defStringфильтр возвращает строку " default" (другие, вероятно, появятся позже). Это позволяет мне использовать его как <span>{{expected.string | defString}}</span>и получить defaultв качестве окончательного запасного уровня.

37

На всякий случай, если вы хотите попробовать что-то еще. Вот что сработало для меня:

На основе троичного оператора, который имеет следующую структуру:

condition ? value-if-true : value-if-false

В результате:

{{gallery.date?(gallery.date | date:'mediumDate'):"Various" }}

— Пол
источник

1

Ответ Педра (13 мая '13 в 13:27, stackoverflow.com/a/16523266/1563880 ) почти такой же, но ваше решение более явное. Хауерер, больше писем писать)

— nktssh

1

Это более интуитивно понятно, особенно если исходить из опыта программирования. Тернарные операторы прокладывают путь для простых If if Ifs.

— просит

2

Извините, что ударил старый поток, но это решение также, вероятно, более производительно, чем принятый ответ, потому что он не вызывает фильтр, если значение будет равно false

— SnailCoil

Это также более полезно при необходимости работать с более глубокими иерархиями.

— Даже Mien

8

Как я могу использовать бинарный оператор вместе с фильтром даты?

<span class="gallery-date">{{gallery.date | date:'mediumDate' || "Date Empty"}}</span>

Вы также пытаетесь:

<span class="gallery-date">{{ gallery.date == 'NULL' ? 'mediumDate' : "gallery.date"}}</span>

— Ризо
источник

3

Мне очень понравился этот ответ, с ngBind, ваш текст по умолчанию может просто жить в теле элемента, а затем, если ngBind оценивает что-то ненулевое / неопределенное, ваш контент заменяется автоматически, и все устраивает

angularjs устанавливает значения по умолчанию для отображения перед оценкой

— chrismarx
источник

0

В вашем cshtml,

<tr ng-repeat="value in Results">                
 <td>{{value.FileReceivedOn | mydate | date : 'dd-MM-yyyy'}} </td>
</tr>

В вашем файле JS, возможно, app.js,

Вне app.controller добавьте фильтр ниже.

Здесь «mydate» - это функция, которую вы вызываете для анализа даты. Здесь «app» - это переменная, которая содержит angular.module

app.filter("mydate", function () {
    var re = /\/Date\(([0-9]*)\)\//;
    return function (x) {
        var m = x.match(re);
        if (m) return new Date(parseInt(m[1]));
        else return null;
    };
});

— Mohamedasiq
источник