在 Angular js 中的控制器中绑定 Twitter Bootstrap 日期选择器的模型值 [英] binding the model value of Twitter Bootstrap datepicker in controller in Angular js
问题描述
我正在使用 Angular.js 和 Twitter Bootstrap 构建一个应用程序.
HTML:
<label for="event">Event</label><input type="text" ng-model="event"/><label for="eventdate">日期</label><div class="input-append date" id="datepicker" data-date-format="dd-mm-yyyy"><input class="span2" size="20" type="text" id="datepicker" ng-model="eventdate" required><span class="add-on"><i class="icon-th"></i></span><input class="btn-primary" type="submit" id="submit" value="Submit" ng-click="submit()"/>
控制器:
var myApp1 = angular.module('myApp1', []);myApp1.controller('myController', function($scope) {$('#datepicker').datepicker();$scope.submit = 函数 () {控制台日志($scope.event);控制台日志($scope.eventdate);};});
当我点击提交"按钮时,
console.log($scope.event);
打印在事件文本框中输入的数据.
但是 console.log($scope.eventdate);
当我从日期选择器中选择一个日期时打印undefined"
可能是什么原因?
请指教.
你的引导日期选择器是 angular 之外的第三个组件.当您从日期选择器更改日期时,angular 不会知道这些更改.
您必须像这样编写自定义指令:
app.directive('datepicker', function() {返回 {限制:'A',//始终与 ng-model 一起使用要求:'?ngModel',链接:函数(范围、元素、属性、ngModel){如果(!ngModel)返回;ngModel.$render = function() {//这将使用您的模型更新视图,以防您的模型被其他代码更改.element.datepicker('update', ngModel.$viewValue || '');};element.datepicker().on("changeDate",function(event){范围.$应用(函数(){ngModel.$setViewValue(event.date);//每当日期选择器的日期改变时,这将更新绑定到你的 ng-model 的模型属性.});});}};});
将指令应用于 html:
<input class="span2" size="20" type="text" required=""/><span class="附加组件"><i class="icon-th"></i></span>
I am building an application with Angular.js and Twitter Bootstrap.
HTML:
<div ng-controller="myController">
<label for="event">Event</label>
<input type="text" ng-model="event"/>
<label for="eventdate">Date</label>
<div class="input-append date" id="datepicker" data-date-format="dd-mm-yyyy">
<input class="span2" size="20" type="text" id="datepicker" ng-model="eventdate" required>
<span class="add-on"><i class="icon-th"></i></span>
<input class="btn-primary" type="submit" id="submit" value="Submit" ng-click="submit()" />
</div>
Controller:
var myApp1 = angular.module('myApp1', []);
myApp1.controller('myController', function($scope) {
$('#datepicker').datepicker();
$scope.submit = function () {
console.log($scope.event);
console.log($scope.eventdate);
};
});
When I click "Submit" button,
console.log($scope.event);
prints the data entered in event text box.
But console.log($scope.eventdate);
prints "undefined" when I select a date from the date picker
What may be the reason?
Please advice.
Your bootstrap datepicker is a 3rd-component outside of angular. When you change your date from the datepicker, angular is not aware of the changes.
You have to write a custom directive like this:
app.directive('datepicker', function() {
return {
restrict: 'A',
// Always use along with an ng-model
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$render = function() { //This will update the view with your model in case your model is changed by another code.
element.datepicker('update', ngModel.$viewValue || '');
};
element.datepicker().on("changeDate",function(event){
scope.$apply(function() {
ngModel.$setViewValue(event.date);//This will update the model property bound to your ng-model whenever the datepicker's date changes.
});
});
}
};
});
Apply the directive to html:
<div class="input-append date" datepicker ng-model="eventdate" data-date-format="dd-mm-yyyy">
<input class="span2" size="20" type="text" required="" />
<span class="add-on">
<i class="icon-th"></i>
</span>
</div>
这篇关于在 Angular js 中的控制器中绑定 Twitter Bootstrap 日期选择器的模型值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!