How to add many functions in one ng-click directive?
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:
Please Login to comment...