用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

回答

相關問題