Programmatically set the value of an input field in angularjs

Question

I have a requirement to pre-populate an input field with the value of another input field. So, once the first field loses focus, the second field gets the same value. The field is editable, but initially, it has the value of the first field. I've found that the ngModel of the second field is not updated.

I do this to set the value of the second field:

$("#" + fieldId).val(newstring);

Here's the HTML for the first field:

<td class="formLabel" vAlign="top" align="left">
                                <input validate-date-time val-type="date" val-start="true" val-end-id="endDate" id="startdate" size="10" max="10" width="20" ng-model="newEvent.startDate">
                                mm/dd/yyyy
                            </td>

Here's the HTML for the second field:

<td class="formLabel" vAlign="top" align="left">
                                <input size="10" validate-date-time val-type="date" id="endDate" max="10" width="20" ng-model="newEvent.endDate">
                                mm/dd/yyyy
                            </td>

This is done in a directive, by the way. Any pointers on how to make this work? I've tried calling scope.$apply and scope.$digest after setting the input val to no avail. And if I shouldn't use jQuery, whats the angular way of setting the value? Thanks

Why are you using jQuery for this? Can you show us what your HTML looks like? — Makoto
– Makoto, Commented Oct 19, 2016 at 19:03
You don't typically use jquery in an angular app (other than in a directive link function or something). You are going to need to show what you have tried so far as well as some sample code before this gets down voted and \ or closed. — Mike Cheel
– Mike Cheel, Commented Oct 19, 2016 at 19:07

GPicazo · Accepted Answer · 2016-10-19 20:00:00Z

2

Try something like this:

// in the controller, add
$scope.isStartDateInitialized = false;
$scope.onStartDateSet = function() {
    if (!$scope.isStartDateInitialized) {
        $scope.isStartDateInitialized = true;
        $scope.newEvent.endDate = $scope.newEvent.startDate;
    }
};

<!-- add the following attribute to the start date input -->
<input ... ng-blur="onStartDateSet()" />

NOTE 1: The above code assumes that you only want to programmatically update the end date the very first time the start date is set. If you want it to always be set to the start date when the start date changes, then you can use ng-change instead of ng-blur.

NOTE 2: You should remove the following JQuery code that you mentioned:

$("#" + fieldId).val(newstring);

answered Oct 19, 2016 at 20:00

GPicazo

6,7263 gold badges23 silver badges25 bronze badges

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

2 Comments

dale landry Over a year ago

@GPicazo if you do not mind answering a newb question for me about your code, I would be very appreciative. I am new to JS, Angular and jQuery, so I am learning a lot. I am curious if isStartDateInitialized & onStartDateSet are these self defined function names or are they built in library functions within the Angular library?

GPicazo Over a year ago

@dalelandry- the property and method you mentioned are custom and specific to the application that is being built. The $scope object (and concept) is specific to Angular, but methods attached to it are specific to that Angular application. So for example, if you and I are both building completely different Angular apps, both of us will deal with $scope(s), directly or indirectly. However, the properties and methods that are attached to that scope will likely be different.

Collectives™ on Stack Overflow

Programmatically set the value of an input field in angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related