pre-populating fields, angularjs controller doesn't recognize the values

Question

I am pre-populating fields from the Facebook API:

$("#inputParentName").val(response.name);
$("#inputParentEmail").val(response.email);
$("#inputParentBirthday").val(response.birthday);

In my AngularJS service I have the following function:

vm.addParent = function () {
    alert(vm.inputParentName);
    alert(vm.inputParentBirthday);
    alert(vm.inputParentEmail);

When this function gets called the pre-populated fields display as 'undefined' in the alert boxes. However if I type in the values I get the actual text that was typed in.

What do I need to do, to have my AngularJS code recognize the pre-populated values?

Not sure what you mean. $("#some_id").val(some_val) will only set the value property of an HTML element. I don't see how you expect that to correspond with a property in vm — Phil
– Phil, Commented Jul 14, 2015 at 2:10
you should avoid using jquery when you are using angular unless there is absolutely no other way to accomplish your task. — Claies
– Claies, Commented Jul 14, 2015 at 2:28
@Claies - right now I'm working throught FB API so until I get a better handle on that, I'm working in a hybrid form. — webdad3
– webdad3, Commented Jul 14, 2015 at 2:49
as far as I'm aware, you don't need jquery to use the Facebook API..... — Claies
– Claies, Commented Jul 14, 2015 at 2:50
@Claies I found an example of how to use AngularJS and FB API... — webdad3
– webdad3, Commented Jul 14, 2015 at 3:41

Incognos · Accepted Answer · 2015-07-14 02:11:59Z

You are using jQuery to populate input field. What you should be doing instead is populating your angular scope value assigned to the ng-model of your input field

i.e.

<input type="text" name"inputParentName" id="inputParentName" ng-model="vm.inputParentName">
<input type="text" name"inputParentEmail" id="inputParentEmail" ng-model="vm.inputParentEmail">
<input type="text" name"inputParentBirthday" id="inputParentBirthday" ng-model="vm.inputParentBirthday">

should be populated not by using jQuery but by assigning the value using angular's scope. (this code likely goes in your controller)

$scope.vm = {
  'inputParentName': response.name,
  'inputParentEmail': response.email,
  'inputParentBirthday': response.birthday
}

Then the values will show up where intended....

(I am guessing at your html and javascript, but this is an approximate guess)

Do yourself a favor and avoid trying to marry jQuery and Angular - it can be done, but it is not necessary.

tuckerjt07 · Accepted Answer · 2015-07-14 02:19:47Z

1

To further clarify the reason that your values are not assigned to the model is that Angular has no clue they are present. Updating a field through a query element rather than ngModel bypasses Angular's data binding. Either calling for a $scope . digest after or placing the assignments into a $scope.$apply(function () {}) would work but is not recommended. Do as suggested and set the values with the built in models.

answered Jul 14, 2015 at 2:19

tuckerjt07

9221 gold badge13 silver badges32 bronze badges

2 Comments

webdad3 Over a year ago

is there a way to pass the response object I'm getting from the facebook api to my controller?

tuckerjt07 Over a year ago

I would need to see what format it is in, but if it is in JSON you can just set it as $scope.facebookAPIObject = returnedFacebookAPIObject;

Collectives™ on Stack Overflow

pre-populating fields, angularjs controller doesn't recognize the values

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related