2013-11-25 13 views
18

Ich habe eine Anforderung, wo ich Millisekunden in xHours und yMins in AngularJS konvertieren will.AngularJS - Wie konvertiert man Millisekunden in xHours und yMins

Für z. 3600000 sollte als 1h 0m angezeigt werden.

Ich versuchte mit date:'H:m' und date:'HH:mm' von der date formats auf Angular's Website.

Aber diese geben 19: 0 und 19:00 statt 1h 0m.

Hinweise dazu sind hilfreich.

Dank

+3

können Sie einen benutzerdefinierten Filter schreiben. "Datum" ist nicht zum Anzeigen von Zeitintervallen. – akonsu

Antwort

10

Sie werden moment's Dauer Objekte verwenden möchten.

zu tun, was Sie wollen, versuchen Sie dies:

app.controller 'MainCtrl', ($scope) -> 
    $scope.name = 'World' 
    $scope.milliseconds = 3600000 
    $scope.duration = moment.duration($scope.milliseconds) 

Und das Markup

<body ng-controller="MainCtrl"> 
    <p>Milliseconds: {{milliseconds}}</p> 
    <p>Duration: {{duration.hours()}}h {{duration.minutes()}}m</p> 
</body> 

plunkr: http://plnkr.co/edit/2HL75Tmr4CoAy5R9smkx

30

Lassen Sie einen benutzerdefinierten Filter für diese machen, zB:

.filter('millSecondsToTimeString', function() { 
    return function(millseconds) { 
    var oneSecond = 1000; 
    var oneMinute = oneSecond * 60; 
    var oneHour = oneMinute * 60; 
    var oneDay = oneHour * 24; 

    var seconds = Math.floor((millseconds % oneMinute)/oneSecond); 
    var minutes = Math.floor((millseconds % oneHour)/oneMinute); 
    var hours = Math.floor((millseconds % oneDay)/oneHour); 
    var days = Math.floor(millseconds/oneDay); 

    var timeString = ''; 
    if (days !== 0) { 
     timeString += (days !== 1) ? (days + ' days ') : (days + ' day '); 
    } 
    if (hours !== 0) { 
     timeString += (hours !== 1) ? (hours + ' hours ') : (hours + ' hour '); 
    } 
    if (minutes !== 0) { 
     timeString += (minutes !== 1) ? (minutes + ' minutes ') : (minutes + ' minute '); 
    } 
    if (seconds !== 0 || millseconds < 1000) { 
     timeString += (seconds !== 1) ? (seconds + ' seconds ') : (seconds + ' second '); 
    } 

    return timeString; 
}; 
}); 

es dann verwenden:

<div>{{ millSeconds | millSecondsToTimeString }}</div> 
11

Es gibt Datum Konverter in AngularJS, nur eingestellt gewünschte Datumsformat:

{{milliseconds | date:'yyyy-MM-dd HH:mm'}} 

Auch Ich habe solche 'timeAgo' Filter jQuery timeago() -Funktion:

.filter('timeAgo', function() { 
    return function(input) { 
     if (input == null) return ""; 
     return jQuery.timeago(input); 
    }; 
}) 

Verbrauch:

{{milliseconds | timeAgo}} 

oder beide zusammen Format für breite Datumsdarstellung verwenden:

<span>{{milliseconds | timeAgo}}, {{milliseconds | date:'yyyy-MM-dd HH:mm'}}</span> 

Ergebnis:

12 minutes ago, 2015-03-04 11:38 
0

Für alle, die Komma-Separatoren haben will (z '21 Tage, 14 Stunden, 7 Minuten):

'use strict'; 

angular.module('contests').filter('duration', function() { 
    return function(milliseconds) { 
     var seconds = Math.floor(milliseconds/1000); 
     var days = Math.floor(seconds/86400); 
     var hours = Math.floor((seconds % 86400)/3600); 
     var minutes = Math.floor(((seconds % 86400) % 3600)/60); 
     var dateTimeDurationString = ''; 
     if ((days > 0) && (hours === 0 && minutes === 0)) dateTimeDurationString += (days > 1) ? (days + ' days ') : (days + ' day '); 
     if ((days > 0) && (hours > 0 || minutes > 0)) dateTimeDurationString += (days > 1) ? (days + ' days, ') : (days + ' day, '); 
     if ((hours > 0) && (minutes > 0)) dateTimeDurationString += (hours > 1) ? (hours + ' hours, ') : (hours + ' hour, '); 
     if ((hours > 0) && (minutes === 0)) dateTimeDurationString += (hours > 1) ? (hours + ' hours ') : (hours + ' hour '); 
     if (minutes > 0) dateTimeDurationString += (minutes > 1) ? (minutes + ' minutes ') : (minutes + ' minute '); 
     return dateTimeDurationString; 
    }; 
}); 
4

Dank. Ich habe Ihren Filter leicht modifiziert, um die Dauer im Format hh: mm: ss zurückzugeben.

.filter('duration', function() { 
    //Returns duration from milliseconds in hh:mm:ss format. 
     return function(millseconds) { 
     var seconds = Math.floor(millseconds/1000); 
     var h = 3600; 
     var m = 60; 
     var hours = Math.floor(seconds/h); 
     var minutes = Math.floor((seconds % h)/m); 
     var scnds = Math.floor((seconds % m)); 
     var timeString = ''; 
     if(scnds < 10) scnds = "0"+scnds; 
     if(hours < 10) hours = "0"+hours; 
     if(minutes < 10) minutes = "0"+minutes; 
     timeString = hours +":"+ minutes +":"+scnds; 
     return timeString; 
    } 
}); 
0

Versuchen Sie dieses

var app = angular.module ('myApp', []) ; 
app.controller ('myController', function ($scope, $filter) { 
    $scope.date = $filter('date')(milliseconds, 'MM/dd/yyyy'); 
}); 
+0

Während dieser Code die Frage beantworten kann, verbessert ein zusätzlicher Kontext bezüglich * warum * und/oder * wie * dieser Code die Frage beantwortet, seinen langfristigen Wert. –

0
(function() { 
    'use strict'; 

    angular 
     .module('module_name') 
     .filter('secondsToDateTime', secondsToDateTime); 

    function secondsToDateTime() { 
     return function(seconds) { 
      return new Date(1970, 0, 1).setSeconds(seconds); 
     }; 
    } 
})(); 


<span>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</span> 
0

Verwenden unterhalb Syntax

$filter('date')(dateObj, format) 

z.B.

$filter('date')(1324339200000, 'dd/MM/yyyy');