Update ng-model of input after input's value changed with jquery unsuccessfully

Question

SITUATION:

This is just an example of what I'm trying to accomplish in a real project, where I get an array of names from a web service, then I locate the inputs with those names, select them and then set their values using jQuery.

PROBLEM:

What I need is to know how to update the ng-model of those fields which I changed their value attribute using jQuery

I have tried these

...but I haven't had luck with any of those options.

I'm using AngularJS v1.4.8 and jQuery v1.11.1

I have tried setting the input type to hidden and type text with style: display:none but I can't get it working properly.

Here is a demo of what I'm trying to do. This has and input and an span bind with the same ng-model.

When you click the button, it's supposed to change the input value using jQuery and then update the 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>

@Sajeetharan, thanks for the reply. This is just a demo, but what I'm trying to do is: given a list o names, locate the inputs with those names, set their `value` via jQuery and then update their ng-model. All this is a function called once a get the names from a REST service. Hope I made situation clearer. Any help is appreciated :) — lealceldeiro, Nov 23 '16 at 17:29
May I ask why you're mixing jQuery and AngularJS? Both frameworks implement a fundamentally different concept and you can achieve what you described with either one. — Hubert Grzeskowiak, Nov 23 '16 at 17:34
I actually tried to use instead the `angular.element` syntax but not luck with that neither :(, really frustrating! I'm open to any suggestion. Maybe I'm missing something trivial here. I've been struggling with this for hours. — lealceldeiro, Nov 23 '16 at 17:37
In AngularJS you usually do not work on the DOM, but on the model (JSON) and AngularJS reflects any changes to the DOM automatically. So what your `ctrl.changeValue` should change is not any input element, but the `vm.wizard.myValue`. Your span and input would show the new value instantly. — Hubert Grzeskowiak, Nov 23 '16 at 17:39

Hubert Grzeskowiak · Accepted Answer · 2016-11-23T17:44:52.157

Fixed ID and added jQuery's change() which is probably what you tried to do. Below you can find your code fixed. And here is how this is usually done with AngularJS alone: 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>

score 1 · Answer 2 · answered Nov 23 '16 at 17:09

1

You write var e = $('#myId'); and inside your input there is

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

I think you missed the id attribute try this instead :

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

answered Nov 23 '16 at 17:09

Massi Issar

403
5
23

Update ng-model of input after input's value changed with jquery unsuccessfully

2 Answers2