Question

所以我有两个文本框供用户选择日期，我使用JqQuery的datepicker UI在单击文本框时显示一个小日历弹出窗口。现在的问题是，当我点击文本框时，弹出日历，我选择一个日期，然后文本框中填充了该日期，我的javascript中的范围变量也会更新。但是，在我的HTML中，直到我点击“收件人”日期框，才会打印“发件人”日期框的值。以下是我的代码：

home.html的

<form name="myForm">
From Date:
<input type="text" id="dateFrom" ng-model="data.dateFromChosen" />
To Date:
<input type="text" id="dateTo" ng-model="data.dateToChosen" />
</form>

<p>You chose: {{ data.dateFromChosen }} and {{ data.dateToChosen }}</p>

的script.js

$scope.data = {};
$("#dateFrom").datepicker({
    onSelect: function(dateText) {
        $scope.data.dateFromChosen = $("#dateFrom").datepicker({dateFormat: 'mm/dd/yyyy'}).val();
        alert("You chose " + $scope.data.dateFromChosen);
    }
});
$("#dateTo").datepicker({
    onSelect: function(dateText) {
        $scope.data.dateToChosen = $("#dateTo").datepicker({dateFormat: 'mm/dd/yyyy'}).val();
        alert("You chose " + $scope.data.dateToChosen);
    }
});

所以这就是：我点击from date框并选择一个日期。然后我得到弹出窗口You chose 06/01/2016表示$scope.data.dateFromChosen = 06/01/2016。但它不会显示在我的HTML中。然后，当我点击to date框时，dateFromChosen的值将打印在HTML上。有谁知道为什么会发生这种情况以及如何解决它？感谢

Answer 1

尝试添加$ scope。$ apply（）以强制角度重新运行摘要周期。

$scope.data = {};
$("#dateFrom").datepicker({
    onSelect: function(dateText) {
        $scope.data.dateFromChosen = $("#dateFrom").datepicker({dateFormat:     'mm/dd/yyyy'}).val();
        $scope.$apply();
        alert("You chose " + $scope.data.dateFromChosen);
    }
});
$("#dateTo").datepicker({
    onSelect: function(dateText) {
        $scope.data.dateToChosen = $("#dateTo").datepicker({dateFormat: 'mm/dd/yyyy'}).val();
        $scope.$apply();
        alert("You chose " + $scope.data.dateToChosen);
    }
});

使用JQuery datepicker时，ng-model不会更新值

1 个答案: