Javascript 使用角度按钮更改输入日期选择器的值

Javascript 使用角度按钮更改输入日期选择器的值,javascript,angularjs,angularjs-scope,angular-ui,angularjs-model,Javascript,Angularjs,Angularjs Scope,Angular Ui,Angularjs Model,我有一个输入字段,它附加了一个角度UI日期选择器。 在下面,我添加了两个按钮来更改日期,“一天一天” 以下是输入部分(就在我的页面后面): 这是我从更改dtFrom的函数: $scope.addDayFrom=function(day){ $scope.parent.dtFrom.setDate($scope.parent.dtFrom.getDate() + parseInt(day)); console.log($scope.parent.dtFrom); }; 它会更改

我有一个输入字段,它附加了一个角度UI日期选择器。 在下面,我添加了两个按钮来更改日期,“一天一天”

以下是输入部分(就在我的页面后面):

这是我从更改
dtFrom的函数:

$scope.addDayFrom=function(day){
    $scope.parent.dtFrom.setDate($scope.parent.dtFrom.getDate() +  parseInt(day));
    console.log($scope.parent.dtFrom);
};
它会更改
$scope.parent.dtFrom中的值,但模型不会更新为输入。

示例:今天我们是
12/05/2015

如果我在上一个按钮上单击一次,
$scope.parent.dtFrom
将是
11/05/2015

这就是显示的内容,除了输入。

我想这是一个范围问题,但我不知道它在哪里。 你有什么线索可以解决这个问题吗


编辑:这里的图片:

这有点像黑客,但它很有效。。。所以我和你分享

当我启动我的应用程序时,我会创建一个本地日期变量,当我点击我的按钮时会对其进行更改。完成后,我会这样做:

$scope.parent.dtFrom = new Date(localDateVariable);
不是最好的解决方案,而是一个解决方案。

将代码更改为:

$scope.addDayFrom=function(day){
    $scope.parent.dtFrom.setDate($scope.parent.dtFrom.getDate() +  parseInt(day));
    console.log($scope.parent.dtFrom);
};
为此:

$scope.addDayFrom=function(day){
    $scope.parent.dtFrom = ($scope.parent.dtFrom.getDate() +  parseInt(day));
    console.log($scope.parent.dtFrom);
};

查看,您可以看到您不需要访问
父级
。我以为您试图访问
parent
范围,但实际上您正在访问您在此处设置的
parent
属性:

$scope.parent={
    dtFrom : new Date(),
    dtTo : new Date()
};
Angular UI datepicker正在通过引用进行监视,正如我们在中所看到的,这是非常有意义的,因为这是最有效的监视策略。要了解更多信息,请阅读Angular core文档:

脏检查可以通过三种策略完成:通过引用、通过 集合内容,并按值。策略的种类不同 它们检测到的变化及其性能特征

  • 通过引用监视()在 “监视表达式”将切换到新值。如果值是数组或 一个对象,其内部的更改不会被检测到。这是最重要的 有效的战略
  • 监视集合内容()可检测集合内部发生的更改 数组或对象:添加、删除或重新排序项时。这个 检测是浅层的-它不能到达嵌套集合。 观看收藏内容比观看电视节目更昂贵 引用,因为集合内容的副本需要 保持。然而,该策略试图将 需要复制
  • 按值监视()检测任意嵌套数据中的任何更改 结构。它是最强大的变更检测策略,但也是 最贵的。完全遍历嵌套数据结构是必要的 每个摘要上都需要,并且需要在 记忆


这就是为什么它没有检测到
$scope.parent.dtFrom.setDate(newDate)
使用情况,并且没有更新模型。因此,只需将这段代码更改为
$scope.parent.dtFrom=newDate
,它应该可以工作(因为它已经使用了全局变量方法)。

尝试在输入之前打印
{{parent.dtFrom}
,看看值是否如您所期望的那样更改。它会更改,这就是为什么我不明白问题出在哪里?它调用
刷新(0)
?不,我想它应该。那么这意味着Angular没有捕获到$scope.parent.dtFrom的更改?我应该添加一块$watch吗?我找到了一个解决方案,但它比Angular way的更具黑客性。也许
$scope.parent.dtFrom.setDate($scope.parent.dtFrom.getDate()+parseInt(day))不正确。如何设置
locaDateVariable
?当应用程序启动时,我将init
$scope.parent.dtFrom
和我的
localDateVariable
设置为日期对象。然后,单击“前一天的事件”按钮,我启动一个函数,该函数使用
localDateVariable.setDate(localDateVariable.getDate()+parseInt(day)),将一天删除到
localDateVariable
,然后我只将其分配给
$scope.parent.dtFrom=newdate(localDateVariable)
为了保持本地变量的更新,当我在输入上从datepicker捕获更改事件时,我会这样做:
localDateVariable=$scope.parent.dtFrom
$scope.addDayFrom=function(day){
    $scope.parent.dtFrom.setDate($scope.parent.dtFrom.getDate() +  parseInt(day));
    console.log($scope.parent.dtFrom);
};
$scope.addDayFrom=function(day){
    $scope.parent.dtFrom = ($scope.parent.dtFrom.getDate() +  parseInt(day));
    console.log($scope.parent.dtFrom);
};
$scope.parent={
    dtFrom : new Date(),
    dtTo : new Date()
};