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 :  Base64 Encode Decode string using Javascript

$("#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 CKEditor Canned Responses using jquery

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

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]

Leave a Reply

  • (will not be published)