Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Medium

Adding multiple functions in one ng-click Directive

Author GAZAL ARORA
0 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

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.

Introduction

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. 

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Syntax

While adding multiple functions, each function is separated by a comma or semi-colon. So, the syntax for this is as follows:

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

OR

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


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>

Output 

output

Explanation

In the above output, two functions are running:

  • 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. 

Here are a few related articles you can refer to:

Please refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Also, enroll in our courses and refer to the mock test and problems available. Have a look at the interview experiences and interview bundle for placement preparations.

Previous article
How to bundle an Angular app for production?
Next article
How to directly update a field by using ng-click in AngularJs?
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass