Значение по умолчанию для шаблона 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
источник