如何格式化大于24小时的小时数(AngularJS) [英] How format a time in hours greater than 24 hours AngularJS

问题描述

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

I have a decimal value in minutes with the value 3361 and need to convert in hours and present in this format: 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

But the result is not that I expected: 08:01:00

推荐答案

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

I fear that you can't acheive what you need using angular date filter.

您可以创建自定义过滤器(此处角度官方指南)并在您需要的格式.

You can create you custom filter (here angular official guide) and build the result in the format you need.

例如，您可以使用moment.duration(3361, 'minutes');和<然后使用 moment-duration-format 来获取格式.

For example, you can create a moment duration using moment.duration(3361, 'minutes'); and then use moment-duration-format to get the duration in the HH:mm:ss format.

这里有一个完整的实时示例:

Here a full live example:

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>

获得相同输出的另一种方法是使用 angular-moment-duration-格式，其中包含要使用的过滤器并显示矩的持续时间.您可以使用 amdCreate 指定持续时间'minutes'单元，然后使用 amdFormat a>.

Another way to get the same output is using angular-moment-duration-format that has filters to use and display moment duration. You can create your duration using amdCreate specifying 'minutes' unit and then format it using 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 的创建者.

PS. I'm the creator of angular-moment-duration-format.

这篇关于如何格式化大于24小时的小时数(AngularJS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！