gpt4 book ai didi

javascript - AngularJS-文本不与 Jquery 时间选择器绑定(bind)

转载 作者:行者123 更新时间:2023-12-03 09:53:48 26 4
gpt4 key购买 nike

我有一段简单的 Angular 代码,它显示选定的时间。但所选日期不与文本区域绑定(bind)。作为替代方案,我使用 HTML5 日期时间本地输入,该输入工作正常。这是 jQuery 时间选择器不起作用。

<!DOCTYPE html>
<html lang="en" data-framework="angularjs">

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>

<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" id="dates" ng-model="tdata">
<text>{{tdata}}</text>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$("#dates").datepicker({
changeMonth: true,
changeYear: true
});
})
</script>

</html>

最佳答案

出于某种原因,当您更改字段的值时,模型不会更新(但是,如果您在字段中键入内容,它将相应更新)。我能想到这一点的唯一原因是日期选择器的工作方式是当字段更改时它不会发送事件(因此它只是更新字段的值并且不会触发任何事件)。

为了解决此问题,您可以将 onSelect 添加到日期选择器并手动更新 tdata 字段,如下所示...

app.controller('myCtrl',function($scope) {

$scope.tdata = '';

$("#dates").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(data) {
$scope.$apply(function() {
$scope.tdata = data;
});
}
});
})

关于javascript - AngularJS-文本不与 Jquery 时间选择器绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30803870/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com