not getting ng-model value

Question

I am new to AngularJS.I am trying to get a newly changed value from a input tag using ng-model but it is returning me the previous value.Can anyone tell me what is wrong here? {{eventDateControl}} is the model.

<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>

controller

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());

}

fetching the new value here

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

//CHANGED DATE SHOULD COME HERE

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

how can the input box change the value when it's marked readonly? — Claies
– Claies, Commented Mar 13, 2015 at 6:29
i am changing it using $scope.eventDateControl.It cannot be changed from the web page — Vallabh Lakade
– Vallabh Lakade, Commented Mar 13, 2015 at 6:31
can you put a watch and see if its being triggered? I'd suggest removing readonly and adding a class instead — Mutahhir
– Mutahhir, Commented Mar 13, 2015 at 6:31
actually its a datepicker.when i select a new date, it comes into the input field but when i try to access it,it gives me the previous value.I can change the date using datepicker as well as $scope.ModelName — Vallabh Lakade
– Vallabh Lakade, Commented Mar 13, 2015 at 6:37

Pankaj Parkar · Accepted Answer · 2015-03-13 06:53:36Z

You need to write a change function for datetimepickerpicker and then apply the scope into it.

And use jquery plugin through directive to get better binding, In below directive i added change function & after changing we need to run digest cycle manually to update scope values.

Directive

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"/>

which goes back to, why make a control readonly and then use a directive to get outside angular and capture the change to the element from jquery? Obviously the element is meant to be changed......
unless I'm totally off my rocker, if readonly was taken off the input, the value would be updated automatically through the two way binding of ng-model in your answer, you didn't include the readonly attribute either.

Collectives™ on Stack Overflow

not getting ng-model value

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related