Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

 



Last Updated : 01 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads