Cannot get the input field value using Angular.js

Question

I am unable to find the input field values using Angular.js. I am providing my code below:

<div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">From Time :</span>
    <input type="text" name="time" id="time" class="form-control oditek-form" placeholder="E.G-9.00AM-10.00AM" ng-model="time" ng-keypress="clearField('time');" maxlength="30">
</div>
<div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">To Time :</span>
    <input type="text" name="time1" id="time1" class="form-control oditek-form" placeholder="E.G-9.00AM-10.00AM" ng-model="time1" ng-keypress="clearField('time1');" maxlength="30">
</div>

Here I am integrating the jquery-timepicker and the script is given below.

$(function() {
    $('#time').timepicker();
    $('#time1').timepicker();
});

My problem is, after selecting the time value when I am trying to fetch those value using one ng-click event, it's showing undefined.

$scope.addTimeDetails = function() {
    console.log('times', $scope.time, $scope.time1);
}

Answer 1

Mixing AngularJS with jQuery libraries is bad solution. Problem is next: You are defining ng-model on input and then initializing jQuery timepicker which makes a problem. You should use some third party angularjs library for datepicker or build your own directive. This one is the similar to the jQuery timepicker: angular-jquery-timepicker

Answer 2

This won't work, since jquery-datepicker modifies the DOM. You can try using angular-datepicker or angular UI bootstrap

Answer 3

ngModels should always have their own object and not be scope properties:

<input type="text" ng-model="formModel.time">

And in your controller:

$scope.formModel = {};

You will then be able to access the value with:

$scope.formModel.time;

Answer 4

jquery timepicker may not fire the keypress event.

try it with ng-change

<input type="text" name="time" id="time" class="form-control oditek-form" placeholder="E.G-9.00AM-10.00AM" ng-model="time" ng-change="clearField('time');"  maxlength="30" >

Answer 5

When you use third party library in angular, recommended approach is that you create a directive as following:

angular.module('app', [ ])
    .directive('timePicker', [function () {
        return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            model: '=ngModel'
        },
        link: function ($scope, element, attrs, ngModelCtrl) {

            element.timepicker();

            element.on('changeTime', function () {
                $scope.$apply(function () {
                    $scope.model = element.val();
                });
            });       
        }
    }
}]);

and use from as:

<input type="text" ng-model="time" time-picker="" />
<input type="text" ng-model="time1" time-picker="" />

Recommended resource: thinking-in-angularjs-if-i-have-a-jquery-background

Answer 6

<script>
$(function() {
    $('#time').timepicker({change: function(time) {
        // the input field
        $scope.time = time;
        if (!$scope.$$phase) $scope.$apply();
    }});
    $('#time1').timepicker({change: function(time) {
        // the input field
        $scope.time1 = time;
        if (!$scope.$$phase) $scope.$apply();
    }});
});
<script>   

You need to put this code in angular js controller to set values in model instead of putting in HTML.