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

Last Updated : 01 Aug, 2022

In this article, we will see how to update the field directly with the help of the ng-click directive in AngularJS, along with understanding different ways to implement it through the implementations.

Any field can be updated with ng-click using a custom JavaScript function. For this, we can make a clickable object in HTML (usually a button) and attach an 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 pop up an 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 clicking on the button.

HTML

<!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"> Welcome to {{name}}! </h1> <!-- on button click the change()  function is called from $scope --> <button type="button" ng-click="change()"> Click Me </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>

Explanation: The button calls the change function which changes the variable name. The change is 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.

Output:

Example 2: This example changes the variable name inside the ng-click directive.

HTML

<!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"> {{name}} Learning Together </h1> <!-- on button click the   name is changed directly --> <button type="button" ng-click="name='GeeksforGeeks'"> Click Me </button> </div> <script type="text/javascript">  var app = angular.module('example', []);  app.controller('basicCntrl', function($scope) {  $scope.name = "GFG";  });  </script> </body> </html>

Output:

Also, we can use other HTML tags to make the ng-click work such as a <p> tag.

Example 3: This example implements a <p> tag to change the heading content.

HTML

<!DOCTYPE html> <html> <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 ng-app="example"> <div ng-controller="basicCntrl"> <h1 style="color:green"> Welcome to {{name}} Learning Portal </h1> <!-- on paragraph click the name is changed directly --> <p style="font-family:Arial;" ng-click="name='GeeksforGeeks'"> Click Me </p> </div> <script type="text/javascript">  var app = angular.module('example', []);  app.controller('basicCntrl', function($scope) {  $scope.name = "GFG";  });  </script> </body> </html>