AngularJS - 将函数的计算值添加到范围

时间:2013-07-01 05:35:08

标签: javascript angularjs angularjs-directive angular-strap

我有两个使用AngularStrap datepicker指令实现的datepicker字段: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>

我还有一个控制器,可以计算两个日期字段的差异。 startDate和endDate。

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

现在,在通过datepicker选择日期之后,当我查看我的范围时,startDate和endDate都只显示带有空行数组的值:{} 你知道这里有什么问题吗?另外,如何将numberOfDays()添加到当前范围。我尝试添加ng-model =“numberOfDays”,但在处理计算时,numberOfDays中的范围值仍为空。任何帮助和建议将不胜感激。

1 个答案:

答案 0 :(得分:3)

设置watch监听器以更改天差表达式,例如

HTML

<input type="text" name="numberOfDays" ng-model="numberOfDays" />

控制器

$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