当通过javascript动态设置angularjs控制器时，输入文本框的ng-model值是不定义的

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

在HTML页面我设置一个输入文本框值通过JavaScript而不是打字,然后当我获取这个值使用AngularJS控制器内使用范围,然后显示定义....

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.

单击Get User按钮后，首先通过JQuery设置lastname字段值，然后调用AngularJS控制器，其中未定义ng-model值。我无法理解这一点。对于这种场景，通过JavaScript或JQuery动态设置输入文本字段值并使用AngularJS模型和控制器获取和使用的解决方案或解决方案是什么?

3 个解决方案

#1

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

看起来您在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>

#2

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

当然! ! !如果您想要绑定(HTML <- > JavaScript)，您必须遵守角度规则。您需要做的是更新为输入框定义的ng模型。因此，在您的输入框中添加:ng-model=“blabla”，并在JavaScript中添加:$scope。鼓励性= <价值> 。

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

更正:在输入中确实有ng-model，但是仍然会错过javascript代码中的赋值。

#3

Add this in angularjs code:-

添加这个在angularjs代码:-

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

#1