当通过javascript动态设置时，输入文本框的ng模型值在angularjs控制器内未定义_Javascript_Jquery_Html_Angularjs

当通过javascript动态设置时，输入文本框的ng模型值在angularjs控制器内未定义

javascript jquery html angularjs

当通过javascript动态设置时，输入文本框的ng模型值在angularjs控制器内未定义,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,在我的HTML页面中，我不是通过键入而是通过JavaScript设置输入文本框值，然后当我在使用作用域的控制器中使用AngularJS获取该值时，它显示为未定义的下面是我的代码：--> 名字：姓氏：重置 $（'#getUser'）。在（'click'，function（）上{ //$（“getUser”）。在（'click'，function（）上{ //警报（“名字”+$（“#fname”）.val（）； $（“#lname”）.val（$（“#fname”）.val（））；警报（“

在我的HTML页面中，我不是通过键入而是通过JavaScript设置输入文本框值，然后当我在使用作用域的控制器中使用AngularJS获取该值时，它显示为未定义的

下面是我的代码：-->


名字：
姓氏：
重置
$（'#getUser'）。在（'click'，function（）上{
//$（“getUser”）。在（'click'，function（）上{
//警报（“名字”+$（“#fname”）.val（）；
$（“#lname”）.val（$（“#fname”）.val（））；
警报（“姓氏设置为“+$（“#lname”）.val（））；
// });
});
//元素（document）.ready（函数（）{}）；
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'formCtrl'，函数（$scope）{
$scope.getUserName=函数（用户）
{
警报（“角度控制器中的姓氏：”+$scope.user.lastname）
}
$scope.resetForm=函数（用户）{
//即使使用form={}，它也不起作用
复制（{}，用户）；
}
});

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

当然啦！！！如果你想要绑定（HTML JavaScript），你必须遵守规则。您需要做的是更新为输入框定义的ng模型。因此，在您的输入框中添加：

ng model=“blabla”

，并在JavaScript中添加：

$scope.blabla=

更正：输入中确实有ng模型，但仍然缺少javascript代码中的赋值。

将此添加到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)     
    }
});


//元素（document）.ready（函数（）{}）；
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'formCtrl'，函数（$scope）{
$scope.user={}；//启动此
$scope.getUserName=函数（用户）
{
警报（“角度控制器中的姓氏：”+$scope.user.lastname）
}
});

看起来您在ng model=“user.lasttname”处有输入错误


名字：
姓氏：
重置
$（'#getUser'）。在（'click'，function（）上{
var element=angular.element（$（'#someForm'）；
element.scope（）.user.lastname=$（“#fname”）.val（）；
});
//元素（document）.ready（函数（）{}）；
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'formCtrl'，函数（$scope）{
$scope.user={}；
$scope.getUserName=function（）
{
log（“用户：+JSON.stringify（$scope.User））；
警报（“角度控制器中的姓氏：”+$scope.user.lastname）
}
$scope.resetForm=函数（用户）{
//即使使用form={}，它也不起作用
//复制（{}，用户）；
}
});

你试过我的答案吗？是的，但仍然没有定义。请参阅下面我的评论。即使在添加了上面的内容之后，$scope.user.lastnameevent仍显示未定义。在更正打字错误后，我将$scope.user.LastNameure显示为未定义。因此，有几种不同的方法可以实现这一点。我将用一个示例来修改上面的代码谢谢您的代码，它可以工作，但实际上上面在第一个脚本标记下编写的JQuery代码是一个示例代码。在实际场景中，这个动态更改文本框的JQuery代码不在我们身边，即与其他客户机（第三方）在一起，因此我们这边（即在我们的AngularJS代码中）是否有任何方法可以获取更改后的文本框值。既然您已经在使用JQuery，您可以绑定到文本框的更改事件，该事件将由使用jquery的第三方代码更改，然后在该事件处理程序中使用上面提供的代码来影响您的角度模型。

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

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