AngularJS Update Bind Ng-model Input Value from JQuery Example

By Hardik Savani October 20, 2023 Category : Javascript jQuery Angular

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:

Read Also: AngularJS Check Null Empty or Undefined Variable Value 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" class="change-value">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...

Tags :
Previous

Laravel Authenticate User in NodeJS with Socket io using JWT
Next

How to Check Input File is Empty or Not in Laravel?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares