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. La directiva ng-click es una herramienta muy útil utilizada en AngularJS. Cuando se hace clic en un HTML, la directiva ng-click le dice al script AngularJS qué hacer.
En este artículo, aprenderemos cómo obtener muchas/múltiples funciones para la directiva ng-click aprobada, con solo un clic.
Sintaxis:
<element ng-click="expression1(), expression2(), expression3()"> </element>
La clave es agregar un punto y coma (;) o una coma (,). Todas las funciones deben estar separadas por un (;) o un (, ). Esta sintaxis es compatible con todos los elementos del HTML. Básicamente es una expresión que, cuando se hace clic, se ejecuta.
Ejemplo: este ejemplo muestra cómo agregar más de una función con un solo clic.
<!DOCTYPE html>
<html>
<head>
<title>
How to add many functions in one ng-click?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body ng-app="myApp">
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<strong>
How to add many functions in one ng-click?
</strong>
<div ng-controller="myCtrl">
<p>Please click the below button to see the working:</p>
<!-- To write multiple functions - write the functions
and separate them by the semicolon (;) -->
<button ng-click="myFunc(); popper();">
Click Here!
</button>
<p>The button has been clicked {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
// first function
$scope.myFunc = function() {
$scope.count++;
// Second function
$scope.popper = function() {
alert('GeeksforGeeks! Click again to increase count');
};
};
}]);
</script>
</body>
</html>
Producción:
- 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 SohomPramanick y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA