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 Set bind ng-model input value from JavaScript Code.
In this post we will show you Read and Set Input Value using angular, hear for 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 angular 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 :  PHP MySQL Infinite Scroll Pagination

$("#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>update bind ng-model input value from javascript 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 :  Introduction To Math Class in C# ASP.NET

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

Leave a Reply

avatar
  Subscribe  
Notify of