Javascript AngularJS动态更改字段值

出于示例的目的，这里有一段非常基本的代码。代码笔示例

链接到

<input ng-model="name" type="text" placeholder="" id="name" />

因此，当在输入字段中键入某些文本时，它会反映在页面上。但是，如果动态设置了

#name

的值，则在这种情况下，通过按下按钮，

{{name}

不会更新

我知道有一种“角度”的方法可以做到这一点，但这只是一个示例，因为实际上动态更改将来自jQuery回调

我已尝试添加一个

$scope.watch

，但这似乎也不起作用。

尝试以下操作：

var app = angular.module('demo',[]);

app.controller('MyController', function MyController($scope) {

  $("#mybutton").on("click", function(){
    //$("#name").val("Demo");
    $scope.name = "Demo"
    $scope.$apply() // we use $scope.$apply() which will call $scope.$digest()
  });

 $scope.name = "Enter a value";

 $scope.$watch('name',function(newValue, oldValue){
        $scope.name(newValue);
    }); 

});

$(document).ready(function(){



});

正在从$（文档）中删除代码。就绪bcoz$范围不可访问

编辑：您也可以使用ng单击

在HTML中

<input type="button" id="mybutton" value="Demo" ng-click="someFunction()">

---

如果希望将jQuery回调与Angular解耦，只需触发

change

事件，这将导致Angular处理新值，就像用户在框中键入一样：

var app = angular.module('demo',[]);

app.controller('MyController', function MyController($scope) {
 $scope.name = "Enter a value";
});

$(document).ready(function() {
  $("#mybutton").on("click", function() {
    $("#name").val("Demo").trigger('change');
  });
});

使用触发器-

JS

---

在角度范围内工作时，不需要jQuery事件绑定

当您在angularjs中更新模型值时，它会启动摘要周期来更新$scope变量

因此，当您在angular范围外工作并尝试调用任何事件时，digest cylce不会启动，结果是模型值不会被UDATED

下面是udpated angular代码：在scope中添加了更新方法，并删除了$scope.watch

app.controller('MyController', function MyController($scope) {
 $scope.name = "Enter a value";

  $scope.update  = function(value){
    $scope.name  = value;
  }

});

更新的HTML：添加了ng click事件

 <input type="button" id="mybutton" ng-click="update('Demo');"  value="Demo">

这是一篇很好的文章，如果你想深入挖掘的话

---

这与预期一样有效，但动态更改（在本例中，通过单击按钮表示）将来自jQuery回调。@Rob您是否希望从angular…（angular…）的外部上下文操纵DOM？@Pankaj我有一个将动态更改的DOM元素，根据这个元素的值，它会改变角度$scope@Rob你介意进一步解释一下吗。。我真的不明白。。谢谢：）无需在此处使用jQuery的

“单击”

句柄。。我会说使用

ng单击
instead@p2我了解男人。。我认为OP的代码希望从angular的外部上下文操纵作用域，对于简单的任务，您不需要$scope.apply（）。当您处于角度范围绑定事件中时，使用jquery不是正确的方法。
$(document).ready(function(){

  $("#mybutton").on("click", function(){
    $("#name").val("Demo");
    $("#name").trigger('input');
  });

});

app.controller('MyController', function MyController($scope) {
 $scope.name = "Enter a value";

  $scope.update  = function(value){
    $scope.name  = value;
  }

});

 <input type="button" id="mybutton" ng-click="update('Demo');"  value="Demo">