In this article I will explain with an example, how to use
ng-click directive in
AngularJS.
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 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
![ng-click example in AngularJS]()
Demo
Downloads
