How to directly update a field by using ng-click in AngularJS ?

10 Oct, 2019
Any field can be updated with ng-click using a custom JavaScript function. For this, we can make a clickable object in an HTML (usually a button) and attach a ng-click directive with it that calls this custom function. The ng-click Directive in AngluarJS is used to apply custom behavior when an element is clicked. It can be used to show/hide some element or it can popup alert when a button is clicked.
Syntax:
<element ng-click="expression"> Contents... </element>
Example 1: This example calls a function to change the field value after click on the button.
<!DOCTYPE html><html ng-app="example">  <head>    <title>        How to directly update a field        by using ng-click in AngularJS?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">    </script></head>  <body>    <div ng-controller="basicCntrl">              <h1 style="color:green">            Hello {{name}}!        </h1>              <!-- on button click the change()            function is called from $scope -->        <button type="button"                ng-click="change()">            Click!        </button>    </div>          <script type="text/javascript">        var app = angular.module('example', []);        app.controller('basicCntrl',        function($scope) {            $scope.name = "GFG";            $scope.change = function() {                this.name = 'GeeksForGeeks';              }        });    </script></body>  </html>
Output:
Before Click on the Button:
After Click on the Button:
The button calls the change function which changes the variable name. The change reflected on the page because of the {{name}} syntax. For simpler logic such as the one shown in example 1, we can avoid calling the function and changing the variable inside the ng-click directive.
Example 2: This example changes the variable name inside the ng-click directive.
<!DOCTYPE html><html ng-app="example">  <head>    <title>        How to directly update a field        by using ng-click in AngularJS?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">    </script></head>  <body>    <div ng-controller="basicCntrl">                  <h1 style="color:green">            Hello {{name}}!        </h1>                  <!-- on button click the name is changed directly -->        <button type="button"                ng-click="name='GeeksForGeeks'">            Click!        </button>    </div>      <script type="text/javascript">        var app = angular.module('example', []);                  app.controller('basicCntrl',                  function($scope) {            $scope.name = "GFG";        });    </script></body>  </html>
Output:
Before Click on the Button:
After Click on the Button:
Also, We can use other HTML tags to make the ng-click work such as a paragraph tag.
Example 3: This example uses a paragraph tag to change the heading content.
<!DOCTYPE html><html ng-app="example">  <head>    <title>        How to directly update a field        by using ng-click in AngularJS?    </title>          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">    </script></head>  <body>    <div ng-controller="basicCntrl">                  <h1 style="color:green">            Hello {{name}}!        </h1>                  <!-- on paragraph click the name is changed directly -->        <p ng-click="name='GeeksForGeeks'">            Click!        </p>    </div>      <script type="text/javascript">        var app = angular.module('example', []);                  app.controller('basicCntrl',                  function($scope) {            $scope.name = "GFG";        });    </script></body>  </html>
Output:
Before Click on the paramgraph element ‘Click’:
After Click on the paramgraph element ‘Click’:
AngularJS-Misc
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular File Upload
Angular | keyup event
Auth Guards in Angular 9/10/11
Routing in Angular 9/10
What is AOT and JIT Compiler in Angular ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?