Comment formater un temps en heures de plus de 24 heures AngularJS

Question

J'ai une valeur décimale en quelques minutes avec la valeur et besoin de convertir en heures et présente dans ce format: 56:01:00

J'ai essayé ce code:

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

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

Mais le résultat est que je pensais: 08:01:00

Answer 1

Je crains que vous ne pouvez pas acheive ce dont vous avez besoin en utilisant un filtre date angulaire.

Vous pouvez créer votre filtre personnalisé (ici angular official guide) et générer le résultat dans le format dont vous avez besoin.

Par exemple, vous pouvez créer un moment duration en utilisant moment.duration(3361, 'minutes'); puis utilisez moment-duration-format pour obtenir la durée dans le format HH:mm:ss.

Voici un exemple vivant complet:

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>

---

Une autre façon d'obtenir la même sortie utilise angular-moment-duration-format qui a des filtres à utiliser et la durée d'affichage moment. Vous pouvez créer votre durée en utilisant amdCreate en spécifiant l'unité 'minutes', puis la formater en utilisant amdFormat.

Voici un exemple:

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. Je suis le créateur de angular-moment-duration-format.

Answer 2

Il n'y a pas intégré AngularJS dat Filtres e/time qui vont accomplir ce que vous essayez d'afficher.

Vous pouvez cependant créer un custom AngularJS filter qui répondra à vos besoins.

Answer 3

% 60 vous donnera des minutes épargnées. Ensuite, vous pouvez simplement le soustraire et le diviser par 60 pour obtenir le nombre d'heures.

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

Essayez de changer votre portée avec ci-dessous également ajouter filtre $ dans votre contrôleur

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