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

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

Today, We want to share with you AngularJS – update bind ng-model input value from Jquery Code.
In this post we will show you Read and Set Input Value using AngularJS, hear for AngularJS – update bind ng-model input value from Jquery Code we will give you demo and example for implement.
In this post, we will learn about How to get HTML form input value in AngularJs controller with an example.

Irregularly, we include to set text value of HTML input box from js source code, however
if you some data bind with ng-model of angular then you can not text input set value here directly with set “val()” of jquery. As simple Bellow example:

Also Read :  iPhone Safari Web App opens links in new window

$("#your-name").val('live24u');

however of you input value set this way and then it will see in your HTML text box, however
you can not get HTML from on submit methods. Therefor, you have to also click ot trigger HTML input type Box that way more easy to AngularJS can get on angular controller function.

You can display bellow full source code example that way you can best way to step by step understand how to solve angularjs update bind ng-model input value from Jquery Code:

Example:

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS - update bind ng-model input value from Jquery Code</title>
	<!-- jquery.min.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<!-- Devloped by angular.min.js -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

<h2>AngularJS - update bind ng-model input value from Jquery source Code</h2>
<div ng-app="liveApp" ng-controller="liveCtrl" id="mainController">
	<form name="form" ng-submit="myliveform()">
	 <input type="text" ng-model="form.name" placeholder="Enter Your Name" id="your-name" />
		 <button type="button" class="defult-change">Change Value</button>
		 <button type="submit">Submit</button>
	</form>
</div>

<script type="text/javascript">
 var liveApp = angular.module("liveApp", []);
 liveApp.controller('liveCtrl', function($scope, $timeout) {
	$scope.myliveform = function() {
		console.log($scope.form.name);
	}
 });
</script>

<script type="text/javascript">
	$('.defult-change').click(function(){
		var liveInput = $("#your-name");
		liveInput.val('live24u');
		liveInput.trigger('input');
	});
</script>

</body>
</html>

We hope you get an idea about How to get HTML form input value in AngularJs controller
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

Also Read :  PHP Laravel 5.6 Image Upload with Validation Example

We hope This Post can help you…….Good Luck!.

Recommended For You.

Fadein Fadeout example using Jquery Example
Today, We want to share with you Fadein Fadeout example using Jquery Example.In this post we will show you FadeIn

Add a Comment

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