How to set the input field value dynamically in AngularJS ? - GeeksforGeeks

29 Sep, 2020
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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
What is AOT and JIT Compiler in Angular ?
How to bundle an Angular app for production?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property