我有两个使用 AngularStrap 日期选择器指令实现的日期选择器字段: http://mgcrea.github.io/angular-strap/ .
<input type="text" name="startDate" ng-model="startDate" data-date-format="dd/mm/yyyy" placeholder="DD/MM/YYYY" bs-datepicker />
<button type="button" class="btn" data-toggle="datepicker">
<i class="icon-calendar"></i>
</button>
<input type="text" name="endDate" ng-model="endDate" data-date-format="dd/mm/yyyy" placeholder="DD/MM/YYYY" bs-datepicker />
<button type="button" class="btn" data-toggle="datepicker">
<i class="icon-calendar"></i>
</button>
我还有一个 Controller ,可以计算两个日期字段的差异。开始日期和结束日期。
$scope.numberOfDays = function() {
if ($scope.startDate != null && $scope.endDate != null) {
var startDate = $scope.startDate;
var endDate = $scope.endDate;
var millisecondsPerDay = 1000 * 60 * 60 * 24;
var millisBetween = endDate.getTime() - startDate.getTime();
var days = millisBetween / millisecondsPerDay;
return Math.floor(days);
}
};
此处显示计算结果。
<input type="text" name="numberOfDays" ng-model="numberOfDays"
value="{{numberOfDays()}} disabled />
现在,通过日期选择器选择日期后,当我查看范围时,startDate 和 endDate 都仅显示带有空白数组的值: { } 你知道这里的问题是什么吗?另外,如何将 numberOfDays() 添加到当前范围。我尝试添加 ng-model="numberOfDays"但在处理计算时 numberOfDays 中的范围值仍然为空。任何帮助和建议将不胜感激。
最佳答案
设置watch监听天数差异表达式的变化,例如
HTML
<input type="text" name="numberOfDays" ng-model="numberOfDays" />
Controller
$scope.$watch(function() {
return Math.floor(($scope.endDate - $scope.startDate) / 86400000);
}, function(days) {
$scope.numberOfDays = days;
});
简化的天数计算取自此处 - https://stackoverflow.com/a/544429/283366
此处为 Plunker 示例 - http://plnkr.co/edit/MPNh7O?p=preview
关于javascript - AngularJS - 将函数的计算值添加到范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17397996/