用jquery更改输入值后输入更新ng-model

EDITED：更清楚问题并修复下面代码中的一些拼写错误。用jquery更改输入值后输入更新ng-model

状况：这只是一个演示中，我尝试在真实的项目中，实际上是一个从Web服务中获得的名称数组来完成一个例子，然后我找到这些投入名称，使用jQuery选择它们，然后设置它们的值（使用jQuery）。

问题：我需要的是知道如何更新这些值的NG-模型使用jQuery

我尝试了这些

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但我不能让它正常工作。

下面是我试图做的一个演示。这有一个输入和一个跨度绑定在同一个ng模型中，当你点击按钮时，假设通过jQuery改变输入值，然后更新ng模型。

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

来源

2016-11-23 lealceldeiro

其实什么是你想怎么办？ – Sajeetharan

输入ng-model：* ctrl.myValue ** 2 ***。范围：* ctrl.myValue *。 –

@Sajeetharan，谢谢你的回复。这只是一个演示，但我想要做的是：给出一个名称列表，使用这些名称查找输入，通过jQuery设置它们的'value'，然后更新它们的ng-model。所有这些都是一个从REST服务中获取名称的函数。希望我使情况更清楚。任何帮助赞赏:) – lealceldeiro

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

来源

2016-11-23 17:37:34

谢谢，您的回答对我很有用，但最终，问题与我的Web服务提供商有关，所以很可能上面提到的其他答案也是正确的（当然，标注的人也是如此）。你提到的角度方法对我没有用，因为我从后端服务渲染表单，所以我不知道ng模型是什么。 – lealceldeiro

你写var e = $('#myId');和你输入内部有

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

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

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

来源

2016-11-23 17:09:56

我只是修复它（一个错字，我的坏），但我认为这不是问题。你能在哪里重现这种情况？它对你有用吗？提前致谢！ – lealceldeiro

用jquery更改输入值后输入更新ng-model

回答

相关问题