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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:39:13  来源:igfitidea点击:

UI-bootstrap datepicker ng-model $scope data not correct in controller

angularjstwitter-bootstrapuser-interfacedatepicker

提问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?

如何将 Bootstrap-datepicker 元素与 angularjs ng-model 绑定?