Question

状况：

这只是我在实际项目中尝试完成的一个示例，我从Web服务获取一系列名称，然后使用这些名称找到输入，选择它们然后使用它们设置它们的值jQuery的。

问题：

我需要知道如何使用jQuery更新我更改其value属性的那些字段的ng-model

我试过这些

Update Angular model after setting input value with jQuery
Angular model doesn't update when changing input programmatically
Update HTML input value changes in angular ng-model

...但我没有幸运的任何选择。

我正在使用AngularJS v1.4.8和jQuery v1.11.1

我尝试将输入类型设置为hidden并使用text键入style: display:none，但我无法使其正常工作。

以下是我正在尝试做的演示。这有和输入和span绑定相同的ng-model。

当您单击该按钮时，它应该使用jQuery更改输入值，然后更新ng-model。

<html>

  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
  </head>
  <body data-ng-app="app">
    <div data-ng-controller="myCtrl as ctrl">
    <span>Value: {{ctrl.myValue}}</span>
    <input name="myId" type="hidden" data-ng-model="ctrl.myValue" />
    <button data-ng-click="ctrl.changeValue('ValueChanged')">Change Value</button>
    </div>

<script>
//my controller
angular.module('app', [])
  .controller('myCtrl', function(){

  var vm = this;

  vm.wizard = {
    changeValue: fnChangeValue
  }

  return vm.wizard;

  function fnChangeValue(newValue){
    var e = $('#myId');
    e.val(newValue);
    e.trigger('input'); //first option

    //e.triggerHandler('change'); //second option
  }
});
</script>

  </body>

</html>

Answer 1

你写var e = $('#myId');并在输入中有

<input name="myId" type="hidden" data-ng-model="ctrl.myValue2" />

我认为你错过了id属性试试这个：

<input id="myId" type="hidden" data-ng-model="ctrl.myValue2" />

Answer 2

修正了ID并添加了jQuery＆＃39; s change()，这可能就是您尝试做的事情。您可以在下面找到修复的代码。以下是单独使用AngularJS的方法：https://jsfiddle.net/rwtm1uh9/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<div data-ng-app="app">
  <div data-ng-controller="myCtrl as ctrl">
    <span>Value: {{ctrl.myValue}}</span>
    <input id="myId" data-ng-model="ctrl.myValue" />
    <button data-ng-click="ctrl.changeValue('ValueChanged')">Change Value</button>
  </div>

  <script>
    //my controller
    angular.module('app', [])
      .controller('myCtrl', function() {

        var vm = this;

        vm.wizard = {
          changeValue: fnChangeValue
        }

        return vm.wizard;

        function fnChangeValue(newValue) {
          var e = $('#myId');
          e.val(newValue);
          e.change();
        }
      });
  </script>

</div>

＆＃13;

输入值因jquery失败而更改后更新输入的输入模型

2 个答案: