AngularJS Update Bind Ng-model Input Value from JQuery Example
Sometimes, we require to set value of input box from js code, But if you bind with ng-model of angular then you can't set value directly with "val()" of jquery. As Bellow example:
$("#my-name").val('test');
But of you set this way then it will display in your text box layout, but you can't get from on submit function. So, you have to also trigger input that way AngularJS can get on controller method.
You can see bellow full example that way you can understand how to solve this issue:
Example:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - update bind ng-model input value from Jquery Code</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="myController" id="mainController">
<form name="form" ng-submit="submitForm()">
<input type="text" ng-model="form.name" id="my-name" />
<button type="button" class="change-value">Change Value</button>
<button type="submit">Submit</button>
</form>
</div>
<script type="text/javascript">
var mainApp = angular.module("mainApp", []);
mainApp.controller('myController', function($scope, $timeout) {
$scope.submitForm = function() {
console.log($scope.form.name);
}
});
</script>
<script type="text/javascript">
$('.change-value').click(function(){
var myInput = $("#my-name");
myInput.val('test');
myInput.trigger('input');
});
</script>
</body>
</html>
Maybe it can help you...
