入力値がjqueryで変更された後に入力のngモデルを更新しました。

EDITED：問題をより明確にし、以下のコードでいくつかのタイプミスを修正しました。入力値がjqueryで変更された後に入力のngモデルを更新しました。

SITUATION：これは実際には、Webサービスからの名前の配列を入手するには、デモ、私が実際のプロジェクトで達成しようとしているものの一例であり、私はそれらとの入力を見つけますjQueryを使用してそれらを選択し、それらの値を設定します（jQueryも使用します）。

問題：私は必要なものは、私はこれらの

Update Angular model after setting input value with jQuery

を使用してvalue属性を変更し、それらの値のNG-モデルを更新する方法を知ることです

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

を使用している私はstyle: display:noneでhiddenとタイプtextに入力タイプを設定しようとしているが、私はそれが正常に働いて得ることができません。

ここで私がしようとしていることのデモです。これは、入力とスパンが同じ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モデル：* 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

あなたは私はあなたがidが代わりにこれを試して属性逃したと思うvar e = $('#myId');書いて、あなたの入力内

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

があります：

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

出典

2016-11-23 17:09:56

私はちょうどそれを修正しました（私のタイプミス）が、それは問題ではない、と私は思います。状況を再現できる場所は？それはあなたのために働いたのですか？前もって感謝します！ – lealceldeiro

入力値がjqueryで変更された後に入力のngモデルを更新しました。

答えて

関連する問題