srikit2014 srikit2014 - 3 months ago 45
HTML Question

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

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.

Answer

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