In this article I will explain with an example, how to fire click event for a Button using
ng-click directive in
AngularJS.
The
AngularJS ng-click directive is used to assign click events to HTML elements like Button.
HTML Markup
The following HTML Markup consists of:
DIV – For applying
ng-app and
ng-controller AngularJS directives.
Button – For capturing user input.
The HTML INPUT Button has been assigned with the following
AngularJS directive.
ng-click – Called when user clicks the Button.
SPAN – For displaying message.
The HTML SPAN has been assigned with the following
AngularJS directive.
ng-bind – This directive tells
AngularJS to replace the content of an HTML element with the value of a given variable, or expression.
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Click Me!" ng-click="ButtonClick()" />
<br /><br />
<span ng-bind="Message"></span>
</div>
Implementing Button click event using ng-click Directive
Inside the HTML Markup, the following
AngularJS script file is inherited:
1. angular.min.js
When the Button is clicked, the ButtonClick function of the Controller gets called.
Inside this function, the Message variable is set, which will be later displayed on the page using SPAN element.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.ButtonClick = function () {
$scope.Message = "Button clicked."
}
});
</script>
Screenshot
![AngularJS: Implement Button click event using ng-click directive example]()
Demo
Downloads
