Asiel Leal Celdeiro Asiel Leal Celdeiro - 14 days ago 7
AngularJS Question

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

EDITED: Make more clear the problem and fixed some typos in code below.

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

PROBLEM:
What I need is to know how to update the ng-model of those values which I changed their value attribute using jquery

I have tried these


  1. Update Angular model after setting input value with jQuery

  2. Angular model doesn't update when changing input programmatically

  3. Update HTML input value changes in angular ng-model



...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 binded with the same ng-model, it's supposed when you click the button, to change the input value via 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>

Answer

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>