Question

我是AngularJS的新手。我正在尝试使用ng-model从输入标签中获取一个新更改的值但它返回了我之前的值。任何人都可以告诉我这里有什么问题？ {{eventDateControl}}是模型。

<div ng-controller="EventInfoController">

<form class="form-horizontal" ng-submit="saveEventInfo(eventData,alertType,eventDateControl)">

        <div class="form-group bottom-border-field">
            <label class="col-md-4 control-label">Event Date & Time:</label>
            <div class="col-md-8">
                <div class="input-group date form_datetime col-md-12"
                    data-date="1979-09-16T05:25:07Z"                        
                    data-date-format="MM dd, yyyy,HH:mm p"
                    data-link-field="dtp_input1">
                    <input id="currentDate" class="form-control" size="16" type="text" value="" ng-model="eventDateControl" readonly>
                     <span class="input-group-addon">
                        <span class="glyphicon glyphicon-remove"></span>
                     </span>
                     <span class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                     </span>
                </div>
            </div>
        </div>

控制器

alertCallApp.controller('EventInfoController',
function($q, $scope,$rootScope,$timeout,$http,eventDetails,$stateParams,currentEventID,getUserDetails,alertAppLib,currentEventStatus,alertTypeDetails) {


$('.form_datetime').datetimepicker({
    // language: 'fr',
    weekStart : 1,
    todayBtn : 1,
    autoclose : 1,
    todayHighlight : 1,
    startView : 2,
    forceParse : 0,
    showMeridian : 1
});

$scope.getEventDetails = function(){


            //  get updateTime in millisec and format in proper format

            var udate = eventResponse.data.alertEvent.updateTime;
            var cdate = eventResponse.data.alertEvent.createTime;

            //  converting updateTime in proper format
            var d = new Date(udate);

            var monthNames = [ "January", "February", "March", "April", "May", "June",
                            "July", "August", "September", "October", "November", "December" ];

            var date = d.getDate() + ' ' + monthNames[d.getMonth()] + ' '+ (d.getYear() + 1900) + '-' + d.getHours() + ':' + d.getMinutes()
            var ampm = (d.getHours() >= 12) ? "PM" : "AM";

            console.log('updateTime in expected format : '+ date+' '+ampm);

            $scope.eventDateControl = date+' '+ampm;

            //  converting createTime in proper format
            d = new Date(cdate);

            monthNames = [ "January", "February", "March", "April", "May", "June",
                            "July", "August", "September", "October", "November", "December" ];

            date = d.getDate() + ' ' + monthNames[d.getMonth()] + ' '+ (d.getYear() + 1900) + '-' + d.getHours() + ':' + d.getMinutes()
            ampm = (d.getHours() >= 12) ? "PM" : "AM";

            console.log('createTime in expected format : '+ date+' '+ampm);

            $scope.createTime = date+' '+ampm;

        } else {
            errMsg = eventResponse.statusMessage;
        }
    });
}



$scope.saveEventInfo = function(eventData,alertType,eventDateControl){

    console.log('eventDateControl :  '+eventDateControl);

    //GET DATE AND CHANGE IT TO MILLISECONDS

        //  converting createTime in proper format

    var res = eventDateControl.split(" ");
    var day = res[0];
    var month = res[1];
    var year = res[2];
    var hours = res[3];

    var res1 = res[2].split("-");
    var year = res1[0];
    var hm = res1[1].split(":");
    var hours = hm[0];
    var min = hm[1];

    var date = new Date(''+year+','+month+','+day+','+hours+':'+min);

    console.log('selected updateTime in ms: '+date.getTime());

}

在此处获取新值

 $scope.saveEventInfo = function(eventData,alertType,eventDateControl){

//CHANGED DATE SHOULD COME HERE

    console.log('eventDateControl :  '+eventDateControl);
    }

Answer 1

您需要为datetimepickerpicker编写更改函数，然后将范围应用到其中。

并使用jquery插件通过指令来获得更好的绑定，在下面的指令中我添加了更改功能＆amp;更改后，我们需要手动运行摘要周期以更新范围值。

<强>指令

app.directive('dateTimePicker', function() {
    return {
        restrict: 'A',
        reuqire: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.datetimepicker({
                // language: 'fr',
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
                onChangeDateTime: function(dp, $input) {
                    $scope.$apply(function() {
                        ngModel.$setViewValue($input.val());
                    });

                }
            });
        }
    }
});

<强> HTML

<input id="currentDate" date-time-picker class="form-control" size="16" 
type="text" value="" ng-model="eventDateControl"/>

没有获得ng-model值

1 个答案: