Adding multiple functions in one ng-click Directive

GAZAL ARORA
Last Updated: May 13, 2022

Introduction

Google developed AngularJS in 2010. Later, it was completely re-written in 2016, and JS was dropped from its name, and it became Angular from AngularJS. It 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. The ng-click Directive instructs the AngularJS script what to do when an HTML element is clicked.


Alert Ninjas! The ongoing emergence of new technologies in web development keeps the interest in this subject high. But, before you start on the big tasks, we recommend that you understand the fundamentals. With our JavaScript Course, you may jumpstart your web development career by mastering JS principles. It's now the cheapest it's ever been!


Syntax

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

OR

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

All the HTML elements support it.

Example: Below is the implementation to add two functions(myFunc(), popper())  in ng-click:

<!DOCTYPE html>
<html>

<head>
<title>
Want to add multiple functions in one ng-click?
</title>

<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

<body ng-app="App">
    
    <div>
        <h1 style = "color:Red;" >
Coding Ninjas
</h1>

<h2>
Want to add many functions in one ng-click?
</h2>

<div ng-controller="myCtrl"
<button  ng-click="myFunc(); popper();">
Press Me!
</button> 
<h3 style="color: grey">The button has been pressed {{count}} times.</h3>
</div>

<script>
angular.module('App', [])

.controller('myCtrl', ['$scope'function($scope) {
$scope.count = 0;

$scope.myFunc = function() {
$scope.count++;

$scope.popper = function() {
  alert('Ninjas! Click here to increase count');
};
};
      }]);
</script>
        
    </div>

</body>
</html>

Output

In the above output, 2 functions are running:

  1. myFunc(), which increases the count,
  2. popper(), which shows the alert box after clicking on “Press Me” button.


Hence, we added 2 functions in one ng-click. Similarly, you can add more functions here. 

Frequently Asked Questions

Q1: What is the difference between onclick and ng-click?
Ans1: 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.

Q2: What is ng-init in AngularJS?

Ans2: The ng-init directive in AngularJS is used to initialize the application data by defining the initial values of the variables for the application. 

Q3: How to add Dynamic Options for Multiple Selects inside ng-repeat Directive?
Ans3: The idea is to use ng-repeat that loops through an array. Click here to learn more.

Key Takeaways

In this article, we learned how to add multiple functions in one ng-click Directive.

Want to build websites but don't know where to start?
 
Start from here; enroll today and build unique websites using Node. Click on the given link to enroll.

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think