Question

我使用ng-bind和日期过滤器输出日期时间。

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

现在我希望能够使用此过滤器在12和24h格式之间切换输出：日期：＆＃39; HH：mm＆＃39;和日期：＆＃39; hh：mm＆＃39;

因此我有一个属性：

model.is24h= true

如何在ng-bind表达式中插入条件以评估我的属性以12h或24h格式输出？

类似的东西：

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

Answer 1

只需添加一个新变量，将变量作为参数

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

Answer 2

尝试更改此条件的过滤器代码。

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>

Answer 3

您可以在指令参数中使用trenary运算符：

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

具有条件的AngularJS日期过滤器

3 个答案: