角度ng模型未绑定jQuery日期选择器值 [英] Angular ng-model not binding jQuery date picker value
问题描述
Angular JS中的新手-我正在尝试将jQuery日期选择器添加到ng-model文本框中.这是jQuery日期选择器的链接:
Newbie in angular js - I am trying to add jQuery date picker to ng-model text box. Here are the links of jQuery date picker:
src="https://resources.ibe4all.com/BrokerAssist/js/BuroRaDer_DateRangePicker.js" type="text/javascript"></script><script type="text/javascript" src="https://resources.ibe4all.com/CommonIBE/js/jquery-1.4.1.js"></script<script type="text/javascript" src="https://resources.ibe4all.com/CommonIBE/js/jquery-ui-1.8.11.custom.min.js">
<link href="https://resources.ibe4all.com/BrokerAssist/cssnew/BuroRaDer.DateRangePicker.css" rel="stylesheet" />
jQuery日期选择器代码:
jQuery date picker code:
<script>
$(document).ready(function () {
$('#RDate').datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true
});
//$("#RDate").click(function () {
// $(this).focus();
//});
});
function AvoidSpace(event) {
var k = event ? event.which : window.event.keyCode;
if (k == 32) return false;
}
</script>
这是我的HTML标记:
This is my HTML markup:
<body style="background-image: url(/Content/images/img_bg_2.jpg);"
ng-app="nmodule" ng-controller="ncontroller">
<form name="userForm" novalidate="novalidate">
<ng-form name="userForm" ng-submit="submitForm(userForm.$valid)">
<input type="text" name="RDate" ng-model="RDate" id="RDate"
placeholder="Enter Registration Date" required />
{{RDate}}
</ng-form>
</form>
</body>
日期选择器的工作原理很像，但是，我面临的问题是日期未与我的角度模型绑定，并且我无法在$ scope中获得日期，而且我的验证在文本框中不起作用没有考虑将日期作为通过日期选择器的输入.
Date picker is working like a charm but, the problem I am facing is that the date is not binding with my angular model and I am not able to get date in $scope plus my validations are not working on the textbox because it is not considering date as input through date picker.
请帮我一个正在工作的矮人
Please help me with a working plunker
推荐答案
使jQuery输入和角度模型直接使用总是有问题，这意味着您经常必须手动执行一些操作来更新模型或告诉angular输入事件已被触发.
It's allways a problem to make jQuery inputs and angular model to work straight out of the box this means that you often have to manually do something to update the model or tell angular that a input event has been fired.
更新模型
根据您的情况，您可以在控制器中更新模型，例如:
Update model
I your situation you could update your model within your contoller, with something like:
app.controller('MainCtrl', function($scope) {
$('#RDate').datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onSelect: function(date) {
$scope.RDate = date;
$scope.$apply();
console.log($scope);
}
});
});
因此onSelect您可以设置模型值并应用范围.
我做了一个小小的例子来说明 https://plnkr.co/edit/kzdUPDcVDNGRoM9vlA4K?p=preview
So onSelect you set the model value and apply scope.
I've made a plunker to illustrate https://plnkr.co/edit/kzdUPDcVDNGRoM9vlA4K?p=preview
添加触发事件
您可以添加一个triggerhandler以获取更改事件并通过以下方式通知角度:
Add Trigger Event
You could add a triggerhandler to get the change event and notify angular this way:
app.controller('MainCtrl', function($scope) {
$('#RDate').datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onSelect: function(date) {
angular.element($('#RDate')).triggerHandler('input');
}
});
});
让一个笨拙的人看到这个: https://plnkr.co/edit/VQAqZcLarDBTW2MFaOY7?p =预览
Made a plunker to see this: https://plnkr.co/edit/VQAqZcLarDBTW2MFaOY7?p=preview
这篇关于角度ng模型未绑定jQuery日期选择器值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
