2015-04-27 4 views
2

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

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

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

Поэтому я свойство:

model.is24h= true 

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

Что-то вроде:

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

ответ

7

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

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'); 
    }; 
}); 
+0

Почему вы добавляете toUpperCase() внутри фильтра? – roschulze

+1

спасибо, что это работает как шарм! – roschulze

-1

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

<span ng-bind="ctr.model.myDate | date:(ctrl.model.is24h?'HH':'hh')+':mm'"><span> 
+0

2 наблюдателя за этот случай использования, кажется, не подходит для меня – roschulze

+0

Право. Удалили. – Polan

0

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

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> 
Смежные вопросы