How to set the input field value dynamically in AngularJS ?
Given an input field and the task is to set the input field value dynamically with the help of AngularJS.
Approach:
- A value is being set to the input field despite the user enter something or not.
- ng-click event is used to call a function that sets the value to ‘This is GeeksForGeeks’ with the help of ng-model.
Example 1: In this example, the input field is read-only So the user can not modify it and the value is set dynamically.
HTML
<!DOCTYPE HTML><html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.nameText = ''; $scope.setVal = function () { $scope.nameText = "This is GeeksForGeeks"; }; }); </script></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> How to set the <input> field value dynamically in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> Input field: <input type="text" readonly name="mytext" ng-model="nameText"> <br><br> <input type="button" ng-click="setVal()" value="Set Dynamically"> <br> </div> </div></body> </html> |
Output:
Example 2: In this example, user can modify the input field but the value entered by user can be set dynamically.
HTML
<!DOCTYPE HTML><html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.nameText = ''; $scope.setVal = function () { $scope.nameText = "This is GeeksForGeeks"; }; }); </script></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> How to set the <input> field value dynamically in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> Input field: <input type="text" name="mytext" ng-model="nameText"> <br> <br> <input type="button" ng-click="setVal()" value="Set Dynamically"> <br> </div> </div></body> </html> |
Output:
Please Login to comment...