Update Angular model using jQuery value

Hi I have an input field that is bound to my model and when the user manually enters a function into it, it is called on change - this works great and the model reflects as expected in the console log.

<input type="text" class="rating" ng-model="review.Rating" ng-change="change()" />


The problem I am currently having is that I have a second jQuery function that the user can call on the page that auto-populates the input field, but that doesn't seem to cause the model to update just the visual value of the input field.

So I added to this second jQuery the following call to trigger the update (based on my research this should be correct)



This seems to work fine in Firefox and Chrome since I am reflecting the model in the console log, however in IE (I have 11 - uncertainty in older browsers) the trigger input doesn't seem to work when the model is updated.

Hope you can help.


source to share

3 answers

updated answer:

I think it doesn't work because Angular is probably not aware of this change. Try calling $ scope. $ Digest () after updating the model or adding a function inside $ scope. $ Apply (function () {$ .....});

Instead of using jQuery, you can simply add a function to the controller that assigns a value to the ng model.


<input type="text" ng-model="data.input" />
<button ng-click="autoFill()">Click me</button>


and in your controller

$scope.autoFill = function() {
    $scope.data.input = "Hello World!";




Since you are updating the textbox value outside of the Angular context, you need to tell Angular to reload the changes to $scope

. So if you have access to the scope variable, immediately call $apply()

after setting the value of the input field via jQuyery:



But if you don't have access to $scope

, you can use either of the parent element or the input field itself to get the scope:

Let's assume your HTML looks like this:

<div id="foo">
    <input type="text" class="rating" ng-model="review.Rating" ng-change="change()" />


Then do the following:





Try using ng-focus instead of ng-change



All Articles