2016-07-05 5 views
-2

Ich bin sehr neu in AngularJS und ich mag Zeitdifferenz zwischen two datetime object with format berechnen:Wie Zeitdifferenz von 2 Datetime-Objekt in AngularJS zu berechnen?

Stunde: Minuten: Sekunden

Aber ich will eine zweistelligen Ausgang in der Zeit erhalten:

Erwartete Ausgabe: 00: 00: 04

Eingang:

StartDate=2016-06-29 15:52:32.360 

EndDate=2016-06-29 15:53:36.970 

Expected output: 00 : 01 : 04 

Dies ist mein Code:

public class User 
{ 
     public int Id { get; set; } 
     public Nullable<System.DateTime> StartDateTime { get; set; } 
     public Nullable<System.DateTime> EndDateTime { get; set; } 
} 

Json output: 

[ 
    { 
    "Id": 121, 
    "StartDateTime": "\/Date(1467195752360)\/", //2016-06-29 15:52:32.360 
    "EndDateTime": "\/Date(1467195756970)\/", //2016-06-29 15:53:36.970 
    }, 
    { 
    "Id": 122, 
    "StartDateTime": "\/Date(1467195752360)\/",// 2016-06-29 15:52:32.360 

    "EndDateTime": "\/Date(1467195758360)\/", //2016-06-29 15:53:36.970 
    } 
] 

Code:

<td ng-repeat="item in User"> 
     //How to display time difference here 
     <p> Hour : Minutes : Seconds </p 
    </td> 
+1

kümmern sich nicht um sie. Was machst du, um das zu versuchen? – AlainIb

+0

Wie würden Sie diese Daten in Javascript vergleichen? –

+0

ist dies Ihre Datetime ist eine Zeichenfolge von Bootstrap Datetime oder ihre zurückgegeben von JavaScript-Datum –

Antwort

5

Sie können es erreichen Filter in ng-repeat:

var app = angular.module('app', []); 
 

 
app.controller('mainCtrl', function ($scope) { 
 
    $scope.timeSlots = [ 
 
    { 
 
     "startDate":1467195752360, 
 
     "endDate":1467195756970 
 
    }, 
 
    { 
 
     "startDate":1467195752360, 
 
     "endDate":1467195758360 
 
    } 
 
    ]; 
 
}); 
 

 
app.filter("getDiff", function() { 
 
    return function(time) { 
 
    var startDate = new Date(time.startDate); 
 
    var endDate = new Date(time.endDate); 
 
    var milisecondsDiff = endDate - startDate; 
 
    
 
     return Math.floor(milisecondsDiff/(1000*60*60)).toLocaleString(undefined, {minimumIntegerDigits: 2}) + ":" + (Math.floor(milisecondsDiff/(1000*60))%60).toLocaleString(undefined, {minimumIntegerDigits: 2}) + ":" + (Math.floor(milisecondsDiff/1000)%60).toLocaleString(undefined, {minimumIntegerDigits: 2}) ; 
 
    
 
    } 
 
});
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <p ng-repeat = "time in timeSlots" ng-bind="time | getDiff"> 
 
</body> 
 
</html>

+0

Wie kann ich dies für jeden meiner Datensätze tun, wie ich mit ng wiederhole –

+0

@JonK Danke für das Aufzeigen, ich habe Update die Antwort. – Deep

+0

NAN in Ihrem Plocker-Ausgang erhalten –

1

Sie können die "$ filter" Winkel verwenden das Datum Ihr

ein Arbeits Plunker zu formatieren: http://plnkr.co/edit/4QzT8688iQkIxoqnJVy0?p=preview

JS:

 // Declare the main module 
var myApp = angular.module('myApp', []); 

angular.module('myApp').controller('Ctrl1', ['$scope','$filter', function($scope,$filter) { 


    $scope.dates = [ 
    { 
     "Id": 121, 
     "StartDateTime": 1467195752360, //2016-06-29 15:52:32.360 
     "EndDateTime": 1467195756970, //2016-06-29 15:53:36.970 
    }, 
    { 
     "Id": 122, 
     "StartDateTime": 1467195752360, // 2016-06-29 15:52:32.360 
     "EndDateTime": 1467195758360, //2016-06-29 15:53:36.970 
    } 
    ]; 

    var compute = function(dates) { 
    for (var i in dates){ 
     dates[i].hours = $filter('date')(dates[i]["EndDateTime"]-dates[i]["StartDateTime"], 'hh') ; 
     dates[i].minutes = $filter('date')(dates[i]["EndDateTime"]-dates[i]["StartDateTime"], 'mm') ; 
     dates[i].secondes = $filter('date')(dates[i]["EndDateTime"]-dates[i]["StartDateTime"], 'ss') ; 
    } 

    } 

    compute($scope.dates); 


}]); 

HTML:

<div ng-controller="Ctrl1"> 
     <div ng-repeat="date in dates"> 
    {{ date.hours }} :{{ date.minutes }} : {{date.secondes }} 
    </div> 

</div> 
+0

Kannst du zeigen, wie ich das mit ng-repeat verwenden werde, da dies innerhalb von –

+0

erfolgen wird, tut mir leid, ich verstehe nicht was du willst. Sie möchten ein ng-repeat verwenden und es in der Ansichtsseite berechnen? – AlainIb

+0

Ich sage, dass ich Liste der Datensätze bekomme und ich möchte Differenz von 2 Datetime-Objekt für jeden Datensatz berechnen.Sie haben dies für einzelne Datensatz getan.Konsum haben Sie mehr als 1 Datensätze und Sie möchten Zeitdifferenz für jeden von das notiert dann wie du es machst? –

1

Machen Sie eine Funktion in Winkel wie diese.

var timediff=function(){ 
var startdate=StartDate;//yr json date. 
var enddate=EndDate; 

// here we will split date time string to get date hour min sec invidually. 
var arr=[]; 
arr=startdate.split(' ');//split date and time 
date=arr[0]; 
var arr0=[]; 
arr0=date.split('-');//split date into yr,date, month 

time=arr[1]; 
var arr1=[]; 
arr1=time.split(':');//split time into min , hour, sec 

var datebegin = new Date(arr0[0], arr0[1]-1, arr0[2], arr1[0], arr1[1],arr1[2]) 

var arr=[]; 
arr=enddate.split(' '); 
date=arr[0]; 
var arr0=[]; 
arr0=date.split('-'); 

time=arr[1]; 
var arr1=[]; 
arr1=time.split(':'); 

var dateend = new Date(arr0[0], arr0[1]-1, arr0[2], arr1[0], arr1[1],arr1[2]) 

var timeLeft = dateend-datestart ; 
parseTime(timeLeft); 




} 

make Parse-Funktion

var parseTime=function(diff){ 

var msec = diff; 
var hh = Math.floor(msec/1000/60/60); 
msec -= hh * 1000 * 60 * 60; 
var mm = Math.floor(msec/1000/60); 
msec -= mm * 1000 * 60; 
var ss = Math.floor(msec/1000); 
msec -= ss * 1000; 

$scope.hh=hh; 
    $scope.mm=mm; 
$scope.ss=ss; 
} 

Verwendung dieser Umfang Variable in Ihrem Code wie folgt.

<p> {{hh}} : {{mm}} : {{ss}}</p> 
+0

Können Sie mir sagen, wie es in meiner html-Ansicht innerhalb p-Tag für jeden Datensatz zu verwenden? –

+0

Ich bearbeite meine Antwort, um Ihnen mehr zu erklären. –

+0

Also, wenn ich meine Aufzeichnungen in Ajax Erfolgsfunktion bekomme ich in diese Datensätze und für jeden Datensatz Aufruf Ihre Funktion timediff und in dieser Funktion übergeben ich meine Startdatum und Ende richtig? –