La directiva ng-click en AngluarJS se usa para aplicar un comportamiento personalizado cuando se hace clic en un elemento. Se puede usar para mostrar/ocultar algún elemento o puede mostrar una alerta emergente cuando se hace clic en el botón.
Sintaxis:
<element ng-click="expression"> Contents... </element>
Ejemplo 1: este ejemplo utiliza la directiva ng-click para mostrar un mensaje de alerta después de hacer clic en el elemento.
<!DOCTYPE html>
<html>
<head>
<title>ng-click Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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>
Salida:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón:
Ejemplo 2: este ejemplo usa la directiva ng-click para mostrar algún contenido después de hacer clic en el elemento.
<!DOCTYPE html> <html> <head> <title>ng-click Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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>
Salida:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA