使用 jquery 更改输入值失败后更新输入的 ng-model答案

【问题标题】：Update ng-model of input after input's value changed with jquery unsuccessfully使用 jquery 更改输入值失败后更新输入的 ng-model
【发布时间】：2016-11-23 17:00:07
【问题描述】：

情况：

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

问题：

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

这些我都试过了

...但我对这些选项中的任何一个都没有运气。

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

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

这是我正在尝试做的演示。这与输入和跨度绑定相同的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>

【问题讨论】：

其实你想做什么？
输入 ng-model：ctrl.myValue2。跨度：ctrl.myValue.
@Sajeetharan，感谢您的回复。这只是一个演示，但我想做的是：给定一个名称列表，找到具有这些名称的输入，通过 jQuery 设置它们的value，然后更新它们的 ng-model。所有这些都是从 REST 服务获取名称后调用的函数。希望我让情况更清楚。任何帮助表示赞赏:)
请问您为什么要混合使用 jQuery 和 AngularJS？两个框架都实现了一个根本不同的概念，您可以使用任何一个来实现您所描述的。
我实际上尝试改用angular.element 语法，但也没有运气:(，真令人沮丧！我愿意接受任何建议。也许我在这里遗漏了一些微不足道的东西。我'已经为此苦苦挣扎了几个小时。

标签： javascript jquery html angularjs

【解决方案1】：

固定 ID 并添加了 jQuery 的 change()，这可能是您尝试做的。您可以在下面找到已修复的代码。以下是通常单独使用 AngularJS 的方式：https://jsfiddle.net/rwtm1uh9/

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

【讨论】：

【解决方案2】：

你写var e = $('#myId');，在你的输入里面有

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

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

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

【讨论】：