如何格式化时间大于24小时的AngularJS

Question

我有一个以分钟为单位的十进制值3361 ，需要转换为小时并以以下格式显示： 56 : 01 : 00

我尝试了这段代码：

$scope.myTime = new Date(1970, 0, 1).setMinutes(3361);

<input type="text" class="form-control" ng-model="myTime | date:'HH:mm:ss'">

但是结果却不是我所期望的： 08 : 01 : 00

Answer 1

我担心您无法使用角度date过滤器来实现所需的功能。

您可以创建自定义过滤器（此处为官方角度指南 ），并以所需的格式生成结果。

例如，您可以使用moment.duration(3361, 'minutes');创建时刻 moment.duration(3361, 'minutes'); 然后使用moment-duration-format获取HH:mm:ss格式的持续时间。

这是一个完整的实时示例：

 angular.module('MyApp', []) .filter('durationFormat', function() { return function(input) { input = input || ''; var out = ''; var dur = moment.duration(input, 'minutes'); return dur.format('HH:mm:ss'); }; }) .controller('AppCtrl', function($scope) { $scope.myTime = 3361; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script> <div ng-app="MyApp" ng-controller="AppCtrl"> {{ myTime | durationFormat }} </div> 

---

获得相同输出的另一种方法是使用角矩持续时间格式 ，该格式具有要使用的过滤器并显示力矩持续时间。 您可以使用amdCreate指定'minutes'单位来创建持续时间，然后使用amdFormat对其进行amdFormat 。

这里是一个例子：

 angular.module('MyApp', ['angularDurationFormat']) .controller('AppCtrl', function($scope) { $scope.myTime = 3361; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script> <script src="https://cdn.rawgit.com/vin-car/angular-moment-duration-format/0.1.0/angular-moment-duration-format.min.js"></script> <div ng-app="MyApp" ng-controller="AppCtrl"> {{ myTime | amdCreate:'minutes' | amdFormat:'HH:mm:ss' }} </div> 

PS。 我是angular-moment-duration-format的创建者。

Answer 2

没有内置的AngularJS日期/时间过滤器可以完成您要显示的内容。

但是，您可以创建一个自定义AngularJS过滤器 ，该过滤器将实现您所需要的。

Answer 3

% 60将为您节省时间。 然后，您可以简单地将其减去60除以得到小时数。

 function minutesToHours(min) { var minutes = min % 60; var hours = (min-minutes)/60; minutes = minutes < 10 ? '0' + minutes : minutes; return hours+':'+minutes+':00'; } console.log(minutesToHours(3361)); 

Answer 4

尝试使用以下方法更改范围，并在控制器中添加$ filter

$scope.myTime = $filter('date')(new Date(1970, 0, 1).setMinutes(3361), 'HH:mm:ss');