Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

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=
    </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=
    </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=
    </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>

Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!