Фильтр даты AngularJS с условием

Я использую ng-bind и фильтр даты для вывода времени даты.

<span ng-bind="ctrl.model.myDate | date:'HH:mm'"><span>

Теперь я хотел бы иметь возможность переключать вывод между 12-часовым и 24-часовым форматом с помощью этого фильтра: дата: «ЧЧ: мм» и дата: «чч: мм»

Поэтому у меня есть свойство:

model.is24h= true

Как я могу вставить условие в выражение ng-bind, чтобы оценить мое свойство для вывода в 12-часовом или 24-часовом формате?

Что-то типа:

<span ng-bind="ctrl.model.myDate | {{ctrl.model.is24h: date:'HH:mm' || date:'hh:mm'}}"><span>

angularjs angular-filters
person roschulze    schedule 27.04.2015    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Просто добавьте новый фильтр с переменной в качестве аргумента

http://jsfiddle.net/HB7LU/13224/

HTML

<span ng-bind="myDate | newDate:is24h"></span>
<button type="button" ng-click="is24h = !is24h">Swap</button>

JS

myApp.filter('newDate', function ($filter) {
    return function (input, arg) {
        var hFormat = arg ? 'HH' : 'hh';
        return $filter('date')(new Date(input), hFormat  + '.mm');
    };
});
person Ed Knowles    schedule 27.04.2015
comment
почему вы добавляете toUpperCase() внутри фильтра? - person roschulze; 27.04.2015

arrow_upward
0
arrow_downward

Попробуйте изменить код фильтра для этого условия.

angular.module('yourmodule').filter('date', function ($filter, $scope) {
            return function (input) {
                if (input == null) { return ""; }
                if ($scope.is24h) {
                    return $filter('date')(new Date(input), 'HH:mm').toUpperCase();
                }

                return $filter('date')(new Date(input), 'hh:mm').toUpperCase();
            };
        });

html должен быть

<span ng-bind="ctrl.model.myDate | date"><span>
person Ramesh Rajendran    schedule 27.04.2015

arrow_upward
-1
arrow_downward

Вы можете использовать тренарный оператор в параметре директивы:

<span ng-bind="ctr.model.myDate | date:(ctrl.model.is24h?'HH':'hh')+':mm'"><span>
person Polan    schedule 27.04.2015
comment
2 наблюдателя для этого варианта использования мне не подходят - person roschulze; 27.04.2015