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 >
< 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
Share your thoughts in the comments
Please Login to comment...