Open In App

How to add many functions in one ng-click directive?

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

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 the button is clicked. The ng-click directive is a very handy tool used in AngularJS. When an HTML is clicked, the ng-click directive tells the AngularJS script what to do.
In this article, we will learn how to get many/multiple functions to the ng-click directive passed, in just one click.

Syntax:

<element ng-click="expression1(), expression2(), expression3()"> </element>

The key is to add a semi-colon (;) or a comma (,). All the functions must be separated by a (;) or a (, ). This syntax is supported by all the elements in the HTML. It is basically an expression that when clicked, gets executed.

Example: This example shows how to add more than one functions in one ng-click.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to add many functions in one ng-click?
    </title>
    <script src=
    </script>
   
<body ng-app="myApp">
   
    <h1 style = "color:green;"
        GeeksforGeeks 
    </h1
   
    <strong
        How to add many functions in one ng-click? 
    </strong>
       
    <div ng-controller="myCtrl">
        
        <p>Please click the below button to see the working:</p>
       
        <!-- To write multiple functions - write the functions
        and separate them by the semicolon (;) -->
        <button ng-click="myFunc(); popper();">
            Click Here!
        </button>
          
        <p>The button has been clicked {{count}} times.</p>
    </div>
   
    <script>
        angular.module('myApp', [])
          
        .controller('myCtrl', ['$scope', function($scope) {
            $scope.count = 0;
           
            // first function
            $scope.myFunc = function() {
                $scope.count++;
              
                // Second function
                $scope.popper = function() {
                    alert('GeeksforGeeks! Click again to increase count');
                };
            };
      }]);
    </script>
</body>
  
</html>


Output:

  • Before clicking on the button:
  • After clicking on the button:



Last Updated : 29 May, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads