Javascript 使用角度按钮更改输入日期选择器的值
我有一个输入字段,它附加了一个角度UI日期选择器。 在下面,我添加了两个按钮来更改日期,“一天一天” 以下是输入部分(就在我的页面后面): 这是我从更改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); }; 它会更改
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()
};