AngularJS減去（DueDateActual - DueDateForecaste）從JSON文件中消耗的範圍

我是AngularJS的新手，需要一些幫助來查找兩個日期之間的日期。我從JSON文件中消耗了兩個日期，並且想要爲每個ID動態地找出兩個日期之間的天數。以下是我的，我可以使用一些幫助。AngularJS減去（DueDateActual - DueDateForecaste）從JSON文件中消耗的範圍

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

來源

2015-08-09 rsmexsal

'$ scope.dayDiff'的結果是什麼？ – azium

此外，可能錯字/錯誤，你有'$ scope.sites //複數'和'$ scope.site //單數'，所以目前後者是undefined – azium

@azium結果是NaN。 – rsmexsal

考慮您的數據：

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>

來源

2015-08-09 04:58:12 azium

謝謝你的回答。它確實有效，但它只能爲我提供第一個對象的結果。我怎樣才能得到兩者的結果？或多個？ – rsmexsal

請不要建議使用Date構造函數解析字符串，它不可靠（以上將在IE8中返回NaN）。 **總是**手動解析字符串。 – RobG

@azium非常感謝您的幫助！它的工作原理，但我確實發現了你發佈的一個小錯誤：item.dayDiff = millisDiff * 1000 * 60 * 60 * 24但它應該是：item.dayDiff = millisDiff /（1000 * 60 * 60 * 24）。我無法感謝你的幫助。你爲我做了一個很大的忙！ – rsmexsal

您需要將字符串日期解析爲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);

將返回兩者之間的差異以毫秒爲單位。

解析函數將日期視爲本地，這與ECMA-262 ed 6和ISO 8601一致，但是ES5（例如新的Date（字符串））會將其解析爲UTC。

來源

2015-08-09 05:15:07 RobG

這真的幫助了我！謝謝！ – EscapeNetscape

AngularJS減去（DueDateActual - DueDateForecaste）從JSON文件中消耗的範圍

回答

相關問題