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

`addTimeDetails` is my ng-click function.while i am click on that function after selecting the time in both field .this console message is showing undefined. — satya, Aug 11 '16 at 12:58
may be this will help. http://stackoverflow.com/questions/18144142/jquery-ui-datepicker-with-angularjs — Nitish, Aug 11 '16 at 13:00
i think you should use create directive for timepicker, because jQuery manipulates the DOM and angular cannot interpret manipulated DOM — Aks1357, Aug 11 '16 at 13:03
You might also need to put your `$scope` variables into an object like `$scope.dateFields.time` and `$scope.dateFields.time1`. Also, choose better element ID values than 'time' and 'time1' as they can be easily confused. — MBielski, Aug 11 '16 at 13:15

score 4 · Answer 1 · answered Aug 11 '16 at 13:08

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

score 1 · Answer 2 · answered Aug 11 '16 at 13:02

1

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

answered Aug 11 '16 at 13:02

Arun Ghosh

7,634
1
26
38

score 1 · Answer 3 · answered Aug 11 '16 at 13:32

1

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;

answered Aug 11 '16 at 13:32

Shaun E. Tobias

527
3
13

1

I had an input model directly at scope and it was working fine until some point. However, at some point on a single page it stopped working no matter what I tried. On other pages the input is linked directly at scope and they work fine. Anyway, appreciate your comment here, I changed the "broken" model to an object and it started working again. I cannot explain why and how this works behind the scene. – user2217057 Mar 03 '21 at 15:51
@user2217057 glad it helped :) – Shaun E. Tobias Mar 04 '21 at 00:59

score 0 · Answer 4 · answered Aug 11 '16 at 13:03

0

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

answered Aug 11 '16 at 13:03

Ja9ad335h

4,995
2
21
29

score 0 · Answer 5 · edited May 23 '17 at 12:08

0

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

edited May 23 '17 at 12:08

Community

1
1

answered Aug 11 '16 at 13:15

Mohammad Akbari

4,486
6
43
74

I used your code but its showing the error `angularjs.js:107 TypeError: element.timepicker is not a function` in console. – satya Aug 11 '16 at 13:24
do you add this resource in page ? try in http://plnkr.co/edit/UHdkgSRX0fv2sUB15FoM?p=preview – Mohammad Akbari Aug 11 '16 at 13:28
Plz add your code to plunker, and add link in commnt to check – Mohammad Akbari Aug 11 '16 at 13:44

Mohan P · Answer 6 · 2016-08-11T13:20:34.143

-1

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

edited Aug 11 '16 at 13:20

answered Aug 11 '16 at 13:01

Mohan P

422
3
16

Don't mix Angular and jQuery like this EVER. – MBielski Aug 11 '16 at 13:12
i used your code its giving this `angularjs.js:107 SyntaxError: missing ) after argument list` error. – satya Aug 11 '16 at 13:13
Are you put this code in same controller or just out side? Can you share your controller code? – Mohan P Aug 11 '16 at 17:22

Cannot get the input field value using Angular.js

6 Answers6