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

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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">
            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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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">
            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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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">
            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>

chevron_right


Output:

  • Before Click on the paramgraph element ‘Click’:
  • After Click on the paramgraph element ‘Click’:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.