如何在小時制時間大於24小時AngularJS

Question

我與價值以分鐘爲十進制值，需要在轉換時間和現在的格式爲：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'"> 

但結果不是我所料：8點01分00秒

Answer 1

加$更換過濾器的範圍，我擔心你不能acheive你需要使用的角度date過濾什麼。

您可以創建自定義過濾器（此處爲angular official guide）並以您需要的格式生成結果。

例如，您可以使用moment.duration(3361, 'minutes');創建moment duration，然後使用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>

---

另一種方式來獲得相同的輸出使用angular-moment-duration-format有過濾器使用，並顯示時刻的持續時間。您可以使用amdCreate指定'minutes'單位創建持續時間，然後使用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 DAT電子/時間過濾器，可以完成您想要顯示的內容。

然而，您可以創建一個custom AngularJS filter，它將實現您正在尋找的東西。

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

試試下面還需要在控制器

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