AngularJS — добавить значение вычисления из функции в область видимости

У меня есть два поля средства выбора даты, которые реализованы с использованием директив средства выбора даты 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>

У меня также есть контроллер, который вычисляет разницу двух полей даты. Дата начала и дата окончания.

$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 по-прежнему равно нулю. Любая помощь и предложение будут оценены.


javascript angularjs angularjs-directive angular-strap
person sharic19    schedule 01.07.2013    source источник
comment
Можете ли вы создать плунжер для этой проблемы?   -  person callmekatootie    schedule 01.07.2013

Ответы (1)


arrow_upward
3
arrow_downward

Настройте прослушиватель 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

Пример планкера здесь - http://plnkr.co/edit/MPNh7O?p=preview

person Phil    schedule 01.07.2013
comment
Большое спасибо за помощь, Фил. :) - person sharic19; 01.07.2013
comment
Как бы вы использовали это в ng-repeat? - person Iladarsda; 22.11.2013