twitter-bootstrap UI-bootstrap datepicker ng-model $scope 数据在控制器中不正确
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/30177192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
UI-bootstrap datepicker ng-model $scope data not correct in controller
提问by Ive Weygers
I'm trying to use UI bootstraps datepicker to let a user select a date. The selected information I asume is stored in the ng-model $scope.enddatevariable. After a date is picked, the correct information is displayed in the browser debugging section above.
我正在尝试使用 UI 引导程序日期选择器让用户选择日期。我假设的选定信息存储在 ng-model $scope.enddate变量中。选择日期后,正确的信息会显示在上面的浏览器调试部分。
view
看法
<pre>
----------
Debugging:
{$ modelStartdate $}
{$ !!partners.length $}
Chosen stardate: The {$ startdate.getDate() $} of {$ startdate.getMonth() $}
Chosen End-date: The {$ enddate.getDate() $} of {$ enddate.getMonth() $}
Chosen Current year {$ enddate.getFullYear() $}
</pre>
<input ng-click="openStartEndPicker($event, 'secondCal')"
type="text"
class="form-control"
datepicker-popup="yyyy/MM/dd"
ng-model="enddate"
is-open="modelEnddate.secondCal"
name="secondCal"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
datepicker-mode="month"/>
<button ng-click="findNotLinkedPartners()" type="submit" class="btn btn-info">
<span><i class="glyphicon glyphicon-repeat"> Validate</i></span>
</button>
On an ng-click event, I want to use this data to make a post request. But I always get the default information 2015 - 4 in the console??
在 ng-click 事件中,我想使用此数据发出发布请求。但是我总是在控制台中得到默认信息 2015 - 4??
Controller:
控制器:
//Datepicker (selfenvoicing)
$scope.startdate ='';
$scope.enddate ='';
//Set start end end date based on current day
$scope.initDates = function() {
var date = new Date();
$scope.startdate = new Date(date.getFullYear(), date.getMonth(), 1);
$scope.enddate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
//Do initial partner validatioin with this year/month information (selve invoiking function)
}();
//In-calender functions/options
$scope.today = function() {
$scope.dt = new Date();
}();
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.dt = null;
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
}();
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
//trick to prevent not opening calender next time
$scope.modelEnddate = {};
$scope.openStartEndPicker = function($event, elementOpened) {
$event.preventDefault();
$event.stopPropagation();
$scope.modelEnddate[elementOpened] = !$scope.modelEnddate[elementOpened];
};
Function to be called:
要调用的函数:
$scope.findNotLinkedPartners = function() {
console.log($scope.enddate.getFullYear() + " - " + $scope.enddate.getMonth());
// POST request here
};
回答by JUNAID
you can call function on ng-change over INPUT element and send 'this' variable, then you will be able to access scope of the directive. using which you can set your controller models :-) HAPPY CODING
您可以通过 INPUT 元素在 ng-change 上调用函数并发送“this”变量,然后您将能够访问指令的范围。使用它你可以设置你的控制器模型 :-) HAPPY CODING
回答by Ive Weygers
Problem sovled. This answer helped me understanding the own private scope of the Datepicker. I could not access it on my own controller.
问题解决了。这个答案帮助我理解了 Datepicker 自己的私有范围。我无法在我自己的控制器上访问它。
Thanks
谢谢
how to bind Bootstrap-datepicker element with angularjs ng-model?

