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
– satya, Commented Aug 11, 2016 at 12:58
may be this will help. stackoverflow.com/questions/18144142/… — Nitish
– Nitish, Commented Aug 11, 2016 at 13:00
i think you should use create directive for timepicker, because jQuery manipulates the DOM and angular cannot interpret manipulated DOM — Aks1357
– Aks1357, Commented Aug 11, 2016 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
– MBielski, Commented Aug 11, 2016 at 13:15

Igor Janković · Accepted Answer · 2016-08-11 13:08:42Z

4

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

answered Aug 11, 2016 at 13:08

Igor Janković

5,5326 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun Ghosh · Accepted Answer · 2016-08-11 13:02:17Z

1

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

answered Aug 11, 2016 at 13:02

Arun Ghosh

7,7741 gold badge28 silver badges38 bronze badges

Comments

Shaun E. Tobias · Accepted Answer · 2016-08-11 13:32:11Z

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, 2016 at 13:32

Shaun E. Tobias

5273 silver badges16 bronze badges

2 Comments

user2217057 Over a year ago

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.

Shaun E. Tobias Over a year ago

@user2217057 glad it helped :)

Ja9ad335h · Accepted Answer · 2016-08-11 13:03:46Z

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, 2016 at 13:03

Ja9ad335h

5,0652 gold badges23 silver badges29 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:08:34Z

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

I used your code but its showing the error angularjs.js:107 TypeError: element.timepicker is not a function in console.
do you add this resource in page <script src="jquery.timepicker.js"></script>? try in plnkr.co/edit/UHdkgSRX0fv2sUB15FoM?p=preview
Plz add your code to plunker, and add link in commnt to check

Mohan P · Accepted Answer · 2016-08-11 13:20:34Z

-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, 2016 at 13:20

answered Aug 11, 2016 at 13:01

Mohan P

4223 silver badges16 bronze badges

3 Comments

MBielski Over a year ago

Don't mix Angular and jQuery like this EVER.

satya Over a year ago

i used your code its giving this angularjs.js:107 SyntaxError: missing ) after argument list error.

Mohan P Over a year ago

Are you put this code in same controller or just out side? Can you share your controller code?

Collectives™ on Stack Overflow

Cannot get the input field value using Angular.js

6 Answers 6

Comments

Comments

2 Comments

Comments

3 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

Comments

3 Comments

3 Comments

Linked

Related