AngularJS is a full-featured JavaScript framework for creating dynamic, single-page web applications. When an element is clicked in AngluarJS, the ng-click Directive is used to perform custom behavior. It can be used to show or hide an element or display a popup alert when the button is pressed.
In AngularJS, the ng-click directive is a handy feature. In this article, you will learn to add multiple functions in one ng-click Directive. To understand it with an example, read to the end.
What is One Ng-Click Directive
The ng-click directive instructs the AngularJS script what to do when an HTML element is clicked. This directive is also responsible for the responses received after the click operation. All the HTML elements support this ng-click directive. The ng-click directive specifies the expression to be executed when you perform any click operation. We need to take care of proper syntax to declare these expressions. So, let’s now have a look at the syntax of these expressions.
Syntax
While adding multiple functions, each function is separated by a comma or semi-colon. So, the syntax for this is as follows:
All the HTML elements support this syntax. Let’s understand this better using an example.
Example
Below is the implementation to add two functions(functionA(), functionB()) in ng-click:
Code
<!DOCTYPE html>
<html>
<head>
<title>
How to add many functions in one ng-click?
</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!--Add Javascript code to take input-->
<script type="text/javascript">
var app = angular.module('codingNinjas', [])
app.controller('myCtrl', ['$scope', function($scope) {
// Declare two variables
$scope.a = 0;
$scope.b = 0;
// Define function A
$scope.functiona = function() {
// Take user input
$scope.a = parseInt(prompt('Enter a number'));
$scope.b = parseInt(prompt('Enter another number'));
// Define function B
$scope.functionb = function() {
alert('Click button to run again');
};
};
}]);
</script>
<body ng-app="codingNinjas">
<h1 style = "color:rgb(51, 14, 216);" >
Coding Ninjas
</h1>
<strong>
Sum of numbers using one ng-click
</strong>
<div ng-controller="myCtrl">
<p>Click below buttom to enter numbers : </p>
<!-- Create multiple fucntions seperated by (;) or (,) -->
<button ng-click="functiona(); functionb();">
Enter Numbers!
</button>
<!-- Display result-->
<p>The Sum of {{a}} and {{b}} is : {{a + b}}</p>
</div>
</body>
</html>
You can also try this code with Online Javascript Compiler
functionA(), which inputs the numbers from the user after clicking on the button.
functionB(), which shows the alert box to run again using the click button.
Hence, we added two functions in one ng-click. Similarly, you can add more functions here.
Frequently asked questions
What is AngularJS?
Angular is an open-source web framework based on Javascript. It is mainly used for developing single-page applications.
What is the use of the ng-click directive?
The ng-click Directive instructs the AngularJS script what to do when an HTML element is clicked. It can be used to show or hide an element or display a popup alert when the button is pressed.
What is the difference between onclick and ng-click?
The execution context is another key difference between ng-click and onclick. An expression inside of ng-click runs against a specific scope object, often the scope object representing the model for the current controller, whereas code inside an onclick attribute executes against the global window object.
What is ng-init in AngularJS?
The ng-init directive in AngularJS is used to initialize the application data by defining the initial values of the variables for the application.
How to add Dynamic Options for Multiple Selects inside ng-repeat Directive?
The idea is to use ng-repeat that loops through an array.
Conclusion
In this blog, we have talked about adding functions in AngularJS. We have seen how to add multiple functions in one ng-click Directive. Excited to learn more about Angular.
116+ registered 