ng-model value of input text box is undefined inside angularjs controller when set dynamically through javascript

Question

In my HTML Page i am setting an input text box value not by typing but through JavaScript and then when I am fetching that value using AngularJS inside the controller using scope, then it's showing undefined....

Below is my code:-->

<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form id="someForm" name="someForm">
    First Name: <input type="text" id="fname" ng-model="user.firstname" ng-model-options="{updateOn: 'change'}" />
    Last Name:  <input type="text" id="lname" ng-model="user.lastname" ng-model-options="{updateOn: 'change'}" />
   <input id="getUser" type="submit" ng-click="getUserName(user)" value="Get User" />
   <button ng-click="resetForm(user)">RESET</button>
  </form>
</div>
<script>
$('#getUser').on('click', function(){
  //$("getUser").on('click', function(){
     //alert("First Name "+$("#fname").val());
     $("#lname").val($("#fname").val());
     alert("Last Name set to "+$("#lname").val());
 // });
});

</script>
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {

$scope.getUserName = function(user)
{

     alert("Last Name in Angular Controller: "+$scope.user.lastname)     

}
$scope.resetForm = function(user) {
      //Even when you use form = {} it does not work
      angular.copy({},user);
    }
});

</script>

</body>
</html>

After clicking Get User Button, first the lastname field value is set through JQuery then AngularJS controller is called in which the ng-model value is undefined. I am unable to understand this. What is the solution or workaround for this type of scenario where the input text field value is set dynamically through JavaScript or JQuery and fetched and used using AngularJS Model and Controller.

Did you try my answer?

Rajkumar R
– Rajkumar R

2016-08-05 09:29:26 +00:00
Commented Aug 5, 2016 at 9:29 — Rajkumar R
– Rajkumar R, Commented Aug 5, 2016 at 9:29
Yes, But still getting undefined. See my comment below..

srikit2014
– srikit2014

2016-08-05 09:53:06 +00:00
Commented Aug 5, 2016 at 9:53 — srikit2014
– srikit2014, Commented Aug 5, 2016 at 9:53

Wake · Accepted Answer · 2016-08-05 10:20:29Z

2

Looks like you have a typo at ng-model="user.lasttname"

<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form id="someForm" name="someForm">
    First Name: <input type="text" id="fname" ng-model="user.firstname" ng-model-options="{updateOn: 'change'}" />
    Last Name:  <input type="text" id="lname" ng-model="user.lastname" ng-model-options="{updateOn: 'change blur'}" />
   <input id="getUser" type="button" ng-click="getUserName(user)" value="Get User" />
   <input id="getUser2" type="button" ng-click="getUserName(user)" value="Get User" />
   <button ng-click="resetForm(user)">RESET</button>
  </form>
</div>
<script>
$('#getUser').on('click', function(){
     var element = angular.element($('#someForm'));
     element.scope().user.lastname = $("#fname").val();  
});

</script>
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.user = {};

$scope.getUserName = function()
{
    console.log("User: "+ JSON.stringify($scope.user));
     alert("Last Name in Angular Controller: "+$scope.user.lastname)     

}
$scope.resetForm = function(user) {
      //Even when you use form = {} it does not work
//      angular.copy({},user);
    }
});

</script>

</body>
</html>

edited Aug 5, 2016 at 10:20

answered Aug 5, 2016 at 9:27

Wake

1,69610 silver badges14 bronze badges

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

4 Comments

srikit2014 Over a year ago

event after correcting typo, I am getting undefined for $scope.user.lastname

Wake Over a year ago

Sure. So, a few different ways you can accomplish this. I'll modify the code above with an example

srikit2014 Over a year ago

thanks for the code, it works, but actually the JQuery code written above under first script tag is a sample one. In actual scenario this JQuery code which dynamically changes text box is not with us i.e. with some other client (3rd Party), so is there any way on our side ( i.e. in our AngularJS Code), where we can fetch that changed Text box value.

Wake Over a year ago

Since you are already using jquery, you could bind to the change event of the text box that will be changed by the 3rd party code using jquery, then within that event handler user the code provided above to affect your angular model.

Rajkumar R · Accepted Answer · 2016-08-05 09:26:49Z

0

Add this in angularjs code:-

<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.user = {}; // Initiate this
    $scope.getUserName = function(user)
    {
        alert("Last Name in Angular Controller: "+$scope.user.lastname)     
    }
});

answered Aug 5, 2016 at 9:26

Rajkumar R

1,0798 silver badges15 bronze badges

1 Comment

srikit2014 Over a year ago

even after adding above, it's showing undefined for $scope.user.lastname

FDavidov · Accepted Answer · 2016-08-05 09:26:40Z

-1

Of course!!! If you want the binding (HTML <--> JavaScript) you must respect the rules of Angular. What you need to do is to update the ng-model being defined for the input box. So, add to your input box: ng-model="blabla" and within your JavaScript: $scope.blabla = <value>.

Correction: You do have the ng-model in the input, but still miss the assignment within your javascript code.

answered Aug 5, 2016 at 9:26

FDavidov

3,7556 gold badges27 silver badges72 bronze badges

Collectives™ on Stack Overflow

ng-model value of input text box is undefined inside angularjs controller when set dynamically through javascript

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related