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)
$(".rating").trigger('input');
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
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.
eg.
<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!";
};
source to share
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:
$scope.$apply();
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()" />
</div>
Then do the following:
angular.element(document.querySelector("#foo")).scope().$apply();
source to share