从 JSON 文件中消耗的 AngularJS 减去 (DueDateActual - DueDateForecaste) $scope答案

【问题标题】：AngularJS subtract (DueDateActual - DueDateForecaste) $scope consumed from a JSON file从 JSON 文件中消耗的 AngularJS 减去 (DueDateActual - DueDateForecaste) $scope
【发布时间】：2015-08-09 04:33:50
【问题描述】：

我是 AngularJS 的新手，需要一些帮助来查找两个日期之间的天数。我从 JSON 文件中消耗了两个日期，我想为每个 ID 动态找出两个日期之间的天数。以下是我所拥有的，我可以使用一些帮助。

<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="Scripts/angular.min.js"></script>

</head>

<body >
 <div ng-controller="SiteCtrl">
   <ul ng-repeat="site in sites">
     <li>{{site.ID}}</li>
     <li>{{dayDiff}}</li>
   </ul>
 </div>
 </body>
<script>
var app = angular.module("MyApp", []);

app.controller("SiteCtrl", function($scope, $http) {
  $http.get('JSON/getsamplesitesCopy.json').
    success(function(data, status, headers, config) {


    $scope.sites = data;

    $scope.dayDiff = $scope.sites.DueDateActual - $scope.sites.DueDateForecasted;


}).
   error(function(data, status, headers, config) {
      // log error
   });
});
</script>

</html>

【问题讨论】：

$scope.dayDiff 的结果是什么？
另外，可能是错字/错误，你有$scope.sites // plural 和$scope.site // singular，所以目前后者是未定义的
@azium 结果是 NaN。
那不好。这里有一个更好的问题，data 的结果是什么？
@azium 这是一个错字。我更正了它，但仍然得到 NaN。

标签： javascript json angularjs scope

【解决方案1】：

考虑您的数据：

data = [
  { 
     "ID": "136", 
     "DueDateForecasted": "2015-09-10",      
     "DueDateActual": "2015-09-17"
  },
  { ... }
]

你有一个对象数组，例如：

$scope.sites = data // $scope.sites is also an array
$scope.sites.DueDateActual // undefined
$scope.sites[0].DueDateActual // "2015-09-17"

关于日期的注释。字符串格式的日期（例如 2015-09-17）在与另一个日期相减时不会为您提供有意义的结果。尝试在浏览器控制台中输入"test" - "test"。你猜对了，它是NaN。为了正确地对日期进行数学运算，您需要创建一个 new Date 对象，将您的日期字符串作为参数传递。

var dueDateActual = new Date($scope.sites[0].DueDateActual)
dueDateActual // Wed Sep 16 2015 20:00:00 GMT-0400 (EDT)

var dueDateForecasted = new Date($scope.sites[0].DueDateForecasted)
dueDateActual - dueDateForecasted // -604800000

这将返回毫秒，因此您需要将其转换为天数

为了对数组中的每个元素执行此操作，您可以map 数组在进程中添加一个字段。

$scope.sites = data.map(function (item) {
  var millisDiff = (new Date(item.DueDateActual) - new Date(item.DueDateForecasted))
  item.dayDiff = Math.floor(millisDiff / ( 1000 * 60 * 60 * 24 ))
  return item
})

然后稍微修改您的ng-repeat 以包含重复项的差异。

<ul ng-repeat="site in sites">
  <li>{{site.ID}}</li>
  <li>{{site.dayDiff}}</li>
</ul>

【讨论】：

感谢您的回答。它确实有效，但它只给了我第一个对象的结果。我怎样才能得到两者的结果？还是多个？
请不要建议使用 Date 构造函数解析字符串，它是不可靠的（上面会在 IE8 中返回 NaN）。总是手动解析字符串。
@azium 非常感谢您的帮助！它有效，但我确实发现了你发布的一个小错误：item.dayDiff = millisDiff * 1000 * 60 * 60 * 24 但它应该是：item.dayDiff = millisDiff / (1000 * 60 * 60 * 24)。我非常感谢你的帮助。你帮了我一个大忙！

【解决方案2】：

您需要将字符串日期解析为 Date 对象。您可以为此使用一个库，或者将其提供给 Date 构造函数（非常不推荐），或者您可以使用一个简单的函数，例如：

/*
**  @param  {string} s - Date string yyyy-mm-dd
**  @return {Date}     - Date object for 00:00:00 with system timezone offset
*/
function parseISODate(s) {
  s = s.split(/\D/);
  return new Date(s[0], s[1]-1, s[2]);
}

然后：

$scope.dayDiff = parseISODate($scope.sites.DueDateActual) -
                 parseISODate($scope.sites.DueDateForecasted);

将返回两者之间的毫秒差。

parse 函数将日期视为本地日期，这与 ECMA-262 ed 6 和 ISO 8601 一致，但 ES5（例如 new Date(string)）会将其解析为 UTC。

【讨论】：

这对我很有帮助！谢谢！