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:

$("#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.

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

Summary
Review Date
Reviewed Item
Article
Author Rating
51star1star1star1star1star

Related FAQ

Here are some more FAQ related to this Article:

  1.   NodeJS RESTful CRUD API and MYSQL - node js Restify Tutorial
  2.   Vue JS Lightweight Trumbowyg WYSIWYG editor component
  3.   How to create password length validation in HTML?
  4.   Get URL Parameters using jQuery Example
  5.   how to allow only 10 digit mobile number validation using javascript with jquery
  6.   JavaScript Array Methods tips, tricks and examples
  7.   Remove Last Character from String in JavaScript
  8.   Laravel 7/6 Pluck Example | How to use pluck() in Laravel 6
  9.   Pattern programs in GO Example
  10.   PHP Send Email using SMTP Authentication