Question

我有两个DateTime对象：

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

在我的HTML中，我有：

<div ng-if="time1 > time2">result</div>。这很有效。

现在我想知道time1减去30分钟是否仍然> TIME2。所以我做了：

<div ng-if="time1 - 30*60*1000 > time2">result</div>这不起作用。

我只能使用>或<直接比较日期时间对象，但我无法使用-或{{{{}}来对其进行数学运算。 1}}。验证：

+显示<div>{{time1 > time2}}</div>。

True显示<div>{{time1 < time2}}</div>。

False显示<div>{{time1 - time2}}</div>。我希望这是一个以毫秒为单位的结果。

问题：如何使用NaN，例如在DateTime上进行数学运算，在一个DateTime上添加分钟，然后比较这两个DateTime。

注意：有些人可能会这样说，因为我的ng-if和time1格式不同。我已经证实这不是问题。当我将time2更改为与time2相同的格式时会发生同样的问题。

Answer 1

我建议使用过滤器，然后你可以使用标准的角度范例。使用我的示例，您的标记将如下所示：

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

过滤器看起来像：

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

这是一个展示这个概念的傻瓜：

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

Answer 2

您还可以创建一个控制器方法来比较日期。

使用Date对象，您可以进行基本的数学运算（减法和加法），之后您可以从日期对象中获得getTime()的时间（以毫秒为单位）。然后你只需要做一些缩放到分钟（* 1000 * 60），你就可以比较分钟。

使用$watchGroup（angular＆gt; = 1.3），您可以观看与时间增量更新相关的每个变量。您还可以在每个输入字段上使用ng-change，但是更容易编写。

下面的演示或此jsfiddle中的内容应该有效。

＆＃13;

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
  };
}

＆＃13;

<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>

＆＃13;

ng-if

2 个答案: