Datetime-Vergleich in ng-wenn

Question

ich zwei Datetime-Objekte haben:

time1 = '2016-04-05T15:30:00'; time2 = '2016-04-05T14:48:41.7609724Z';

In meinem HTML, ich habe:

<div ng-if="time1 > time2">result</div>. Das funktioniert gut.

Jetzt möchte ich wissen, ob time1 minus 30 Minuten still> time2. Also habe ich:

<div ng-if="time1 - 30*60*1000 > time2">result</div> Dies funktioniert nicht.

Es ist wie ich nur das Datetime-Objekt > oder < direkt vergleichen kann, aber ich kann Mathe auf es nicht - oder + verwenden. Zur Verifizierung:

<div>{{time1 > time2}}</div> zeigt True.

<div>{{time1 < time2}}</div> zeigt False.

<div>{{time1 - time2}}</div> zeigt NaN. Ich erwarte, dass dies eine Zahl des Ergebnisses in Millisekunden ist.

FRAGE: Wie Mathematik auf dem Datetime zu tun mit ng-if, z.B. Hinzufügen von Minuten zu einer DateTime, dann vergleichen Sie diese beiden DateTime.

ANMERKUNGEN: Einige mögen sagen, dass es ist, weil mein time1 und time2 unterschiedliches Format haben. Ich habe festgestellt, dass dies nicht das Problem ist. Dasselbe Problem tritt auf, wenn ich time2 in dasselbe Format wie time1 ändere.

Answer 1

Ich schlage vor, einen Filter zu verwenden, dann können Sie Standardwinkelparadigmen verwenden. Mit meinem Beispiel wird Ihr Markup wie folgt aussehen:

{{date1 | myFilter: date2: '-'}} 

Und der Filter etwas wie folgt aussehen:

.filter('myFilter', function() { 
    return function(date1, date2, operation) { 
    switch(operation) { 
     case '===': 
     return date1.toString() === date2.toString(); 
     break; 
     case '-': 
     return (date1 - date2).toString(); 
     break 
    } 
    } 
}) 

hier ist ein Plunker das Konzept demonstriert:

https://plnkr.co/edit/gqQ0OsdR6cN7u4VM5AvP?p=preview

Answer 2

Sie können auch eine Controller-Methode für den Vergleich der Daten erstellen.

Mit dem Date-Objekt können Sie Grundrechenarten (Subtraktion und Addieren) durchführen und danach können Sie die Zeit in Millisekunden mit getTime() von Datum Objekt erhalten. Dann müssen Sie nur einige Minuten skalieren (* 1000 * 60) und Sie können die Minuten vergleichen.

Mit einem $watchGroup (eckig> = 1.3) können Sie jede Variable beobachten, die für ein Update Ihres Zeitdeltas relevant ist. Sie könnten auch ng-change für jedes Eingabefeld verwenden, aber watch ist einfacher zu schreiben.

wie etwas in der Demo unten oder in diesen jsfiddle sollte funktionieren.

angular.module('demoApp', ['ui.bootstrap']) 
 
    .controller('mainController', MainController); 
 

 
function MainController($scope) { 
 
    var vm = this; 
 
    vm.date1 = new Date(); 
 
    vm.diff = 35; 
 
    vm.date2 = new Date(vm.date1); 
 
    vm.date2.setMinutes(vm.date1.getMinutes() + vm.diff); 
 

 
    vm.date = { 
 
    deltaMinutes: vm.diff, 
 
    deltaBool: Date((vm.date2 - vm.date1)) 
 
    }; 
 

 
    vm.updateDate = function(date) { 
 
    //console.log('changed', date); 
 
    var deltaDate = new Date((vm.date2 - vm.date1)); 
 
    vm.date.deltaMinutes = (deltaDate.getTime()/1000/60); 
 
    vm.date.deltaBool = vm.date.deltaMinutes >= vm.diff; 
 
    //console.log(vm.diff); 
 
    }; 
 

 
    vm.open1 = function() { 
 

 
    vm.popup1.opened = true; 
 
    console.log('clicked open', vm.popup1); 
 
    }; 
 

 
    vm.open2 = function() { 
 
    vm.popup2.opened = true; 
 
    }; 
 

 
    $scope.$watchGroup(['mainCtrl.date1', 'mainCtrl.date2', 'mainCtrl.diff'], vm.updateDate); 
 

 
    //$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
 
    //$scope.format = $scope.formats[0]; 
 
    //vm.altInputFormats = ['M!/d!/yyyy']; 
 

 
    vm.popup1 = { 
 
    opened: false 
 
    }; 
 
    vm.popup2 = { 
 
    opened: false 
 
    }; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController as mainCtrl"> 
 
    time difference in minutes: 
 
    <input ng-model="mainCtrl.diff"/> 
 
    <br/>date1: 
 
    <p class="input-group"> 
 
    <input type="text" class="form-control" ng-model="mainCtrl.date1" is-open="mainCtrl.popup1.opened" ng-required="true" close-text="Close" uib-datepicker-popup alt-input-formats="mainCtrl.altInputFormats"/> 
 
    <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default" ng-click="mainCtrl.open1()"><i class="glyphicon glyphicon-calendar"></i></button> 
 
      </span> 
 
    </p> 
 
    <uib-timepicker ng-model="mainCtrl.date1" ng-change="mainCtrl.changed(mainCtrl.date1)" show-meridian="ismeridian"></uib-timepicker> 
 

 
    date2: 
 
    <p class="input-group"> 
 
    <input type="text" uib-datepicker-popup class="form-control" ng-model="mainCtrl.date2" is-open="mainCtrl.popup2.opened" ng-required="true" close-text="Close" alt-input-formats="mainCtrl.altInputFormats" /> 
 
    <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default" ng-click="mainCtrl.open2()"><i class="glyphicon glyphicon-calendar"></i></button> 
 
      </span> 
 
    </p> 
 
    <uib-timepicker ng-model="mainCtrl.date2" show-meridian="ismeridian"></uib-timepicker> 
 
    <br/>time difference in minutes = {{mainCtrl.date.deltaMinutes}} 
 
    <div ng-if="mainCtrl.date.deltaBool" class="alert alert-success"> 
 
    date1 is at least {{mainCtrl.diff}} Minutes before date2 
 
    </div> 
 
</div>