AngularJS | ng-click Directive
The ng-click Directive in AngluarJS is used to apply custom behavior when an element is clicked. It can be used to show/hide some element or it can popup alert when button is clicked.
Syntax:
<element ng-click="expression"> Contents... </element>
Example 1: This example uses ng-click Directive to display an alert message after clicking the element.
<!DOCTYPE html> <html> <head> <title>ng-click Directive</title> <script src= </script> </head> <body ng-app="geek" style="text-align:center"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-click Directive</h2> <div ng-controller="app"> <button> <a href="" ng-click="alert()"> Click Here </a> </button> </div> <script> var app = angular.module("geek", []); app.controller('app', ['$scope', function ($app) { $app.alert = function () { alert("This is an example of ng-click"); } }]); </script> </body> </html> |
Output:
Before clicking the button:
After clicking the button:
Example 2: This example uses ng-click Directive to display some content after clicking the element.
<!DOCTYPE html> <html> <head> <title>ng-click Directive</title> <script src= </script> </head> <body ng-app="" style="text-align:center"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-click Directive</h2> <form name="form"> <div ng-hide="isShow"> Enter Name: <input type="text" required ng-model="Name" /> <br><br> <input type="button" ng-disabled="form.$invalid" ng-click="isShow = true" value="Sign in" /> </div> <div ng-show="isShow"> Sign in successful.<br> <input type="button" ng-click="isShow = false;Name=''" value="Logout" /> </div> </form> </body> </html> |
Output:
Before clicking the button:
After clicking the button:
.png)
.png)