Here we will learn what is ng-click event directive in angularjs with example, how to call function in ng-click directive in angularjs, how to call ng-click function with parameters in angularjs.
In angularjs ng-click directive event / function is used to define an angular click event for html elements. Suppose if you want to add and fire a click event on HTML button click that time we need to use this event.
Following is the syntax of using ng-click event in angularjs applications.
<element ng-click="expression">
...your code...
</element>
Following is the example of using ng-click event in angularjs applications.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-click Event Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngclickApp', []);
app.controller('ngclickCtrl', function ($scope) {
$scope.clkcount = 0;
});
</script>
</head>
<body>
<div ng-app="ngclickApp" ng-controller="ngclickCtrl">
<h2>AngularJs ng-click Events Example</h2>
<input type="button" style="cursor:pointer" value="Click Here" ng-click ="clkcount=clkcount+1" /><br /><br />
<span style="color:Red">Number of Times you Clicked: {{clkcount}}</span>
</div>
</body>
</html>
If you observe above example we added ng-click event to button and getting button clicks count value in angularjs application.
Following is the result of using ng-click event in angularjs applications.
In angularjs we can call function in ng-click event. Following is the syntax of calling function in angularjs ng-click event
<element ng-click="yourfunction()">
...your code...
</element>
Following is the example of calling function in angularjs ng-click event
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-click Event Function Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngclickApp', []);
app.controller('ngclickCtrl', function ($scope) {
$scope.clkcount = 0;
$scope.getdetails = function () {
$scope.clkcount = $scope.clkcount + 1;
}
});
</script>
</head>
<body>
<div ng-app="ngclickApp" ng-controller="ngclickCtrl">
<h2>AngularJs ng-click Event Function Example</h2>
<input type="button" style="cursor:pointer" value="Click Here" ng-click ="getdetails()" /><br /><br />
<span style="color:Red">Number of Times you Clicked: {{clkcount}}</span>
</div>
</body>
</html>
If you observe above code we are calling function “getdetails()” in button ng-click event in angularjs application.
Following is the result of calling function in angularjs ng-click event.
In angularjs we can call function with parameters in ng-click event. Following is the example of calling function with parameters in angularjs ng-click event
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-click Event Function with Parameters Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngclickApp', []);
app.controller('ngclickCtrl', function ($scope) {
$scope.getdetails = function (msg) {
$scope.result = msg;
}
});
</script>
</head>
<body>
<div ng-app="ngclickApp" ng-controller="ngclickCtrl">
<h2>AngularJs ng-click Event Function Example</h2>
<input type="button" style="cursor:pointer" value="Click Here" ng-click ="getdetails('welcome to tutlane.com')" /><br /><br />
<span style="color:Red">{{result}}</span>
</div>
</body>
</html>
If you observe above example we are sending message as parameter to getdetails function and showing that parameter while clicking on button.
Following is the result of sending parameters to with functions in angularjs events example.