CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
srikit2014
srikit2014

Reputation: 45

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.

Upvotes: 2

Views: 5019

Answers (3)

Wake
Wake

Reputation: 1696

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>

Upvotes: 2

Rajkumar R
Rajkumar R

Reputation: 1097

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)     
    }
});

Upvotes: 0

FDavidov
FDavidov

Reputation: 3675

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.

Upvotes: -1

Related Questions