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

标签 javascript jquery angularjs

我有一段简单的 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/

相关文章:

javascript - onclientClick执行然后Page被Postback

javascript - Three.js - 关于(使用)THREE.BufferGeometry 的问题

javascript - 整页弹出消息配合alert激活

angularjs - 带 Controller 的 AngularStrap 关闭模式

angularjs - 如何从 AngularJS 异步验证器返回错误上下文信息?

javascript - 如何为图表中的每个数据点创建自定义工具提示?

javascript - Backbonejs 查看 self 模板replaceWith 和事件

javascript - 如何在jquery中将价格格式字符串转换为数字

javascript - 通过单击文本更改图片

angularjs - 嵌套指令和父范围