Cualquier campo se puede actualizar con ng-click usando una función de JavaScript personalizada. Para esto, podemos hacer un objeto en el que se pueda hacer clic en un HTML (generalmente un botón) y adjuntar una directiva ng-click que llame a esta función personalizada. 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 un botón.
Sintaxis:
<element ng-click="expression"> Contents... </element>
Ejemplo 1: este ejemplo llama a una función para cambiar el valor del campo después de hacer clic en el botón.
<!DOCTYPE html>
<html ng-app="example">
<head>
<title>
How to directly update a field
by using ng-click in AngularJS?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body>
<div ng-controller="basicCntrl">
<h1 style="color:green">
Hello {{name}}!
</h1>
<!-- on button click the change()
function is called from $scope -->
<button type="button"
ng-click="change()">
Click!
</button>
</div>
<script type="text/javascript">
var app = angular.module('example', []);
app.controller('basicCntrl',
function($scope) {
$scope.name = "GFG";
$scope.change = function() {
this.name = 'GeeksForGeeks';
}
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
El botón llama a la función de cambio que cambia el nombre de la variable. El cambio reflejado en la página debido a la sintaxis {{name}} . Para una lógica más simple como la que se muestra en el ejemplo 1, podemos evitar llamar a la función y cambiar la variable dentro de la directiva ng-click.
Ejemplo 2: este ejemplo cambia el nombre de la variable dentro de la directiva ng-click.
<!DOCTYPE html>
<html ng-app="example">
<head>
<title>
How to directly update a field
by using ng-click in AngularJS?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body>
<div ng-controller="basicCntrl">
<h1 style="color:green">
Hello {{name}}!
</h1>
<!-- on button click the name is changed directly -->
<button type="button"
ng-click="name='GeeksForGeeks'">
Click!
</button>
</div>
<script type="text/javascript">
var app = angular.module('example', []);
app.controller('basicCntrl',
function($scope) {
$scope.name = "GFG";
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Además, podemos usar otras etiquetas HTML para hacer que ng-click funcione, como una etiqueta de párrafo.
Ejemplo 3: este ejemplo utiliza una etiqueta de párrafo para cambiar el contenido del encabezado.
<!DOCTYPE html>
<html ng-app="example">
<head>
<title>
How to directly update a field
by using ng-click in AngularJS?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body>
<div ng-controller="basicCntrl">
<h1 style="color:green">
Hello {{name}}!
</h1>
<!-- on paragraph click the name is changed directly -->
<p ng-click="name='GeeksForGeeks'">
Click!
</p>
</div>
<script type="text/javascript">
var app = angular.module('example', []);
app.controller('basicCntrl',
function($scope) {
$scope.name = "GFG";
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el elemento de párrafo ‘Hacer clic’:
- Después de hacer clic en el elemento de párrafo ‘Hacer clic’:
