¿Cómo actualizar directamente un campo usando ng-click en AngularJS?

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’:

Publicación traducida automáticamente

Artículo escrito por thvardhan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *