AngularJS – update bind ng-model input value from Jquery Code

AngularJS – update bind ng-model input value from Jquery Code

In this post we will give you information about AngularJS – update bind ng-model input value from Jquery Code. Hear we will give you detail about AngularJS – update bind ng-model input value from Jquery CodeAnd how to use it also give you demo for it if it is necessary.

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" >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…

Hope this code and post will helped you for implement AngularJS – update bind ng-model input value from Jquery Code. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

9  +  1  =  

We accept paid advance and paid guest Posting on our Site : Contact US