How to directly update a field by using ng-click in AngularJS ?

In this article, we will see how to update the field directly with the help of the ng-click directive in AngularJS, along with understanding different ways to implement it through the implementations.

Any field can be updated with ng-click using a custom JavaScript function. For this, we can make a clickable object in HTML (usually a button) and attach an ng-click directive with it that calls this custom function. 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 pop up an alert when a button is clicked.

Syntax:

 
    Contents...

Example 1: This example calls a function to change the field value after clicking on the button.

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">
            Welcome to {{name}}!
        h1>
        
        
        <button type="button" ng-click="change()">
            Click Me 
        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>

Explanation: The button calls the change function which changes the variable name. The change is reflected on the page because of the {{name}} syntax. For simpler logic such as the one shown in example 1, we can avoid calling the function and changing the variable inside the ng-click directive.

Output:

Example 2: This example changes the variable name inside the ng-click directive.

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">
            {{name}} Learning Together
        h1>
        
        
        <button type="button" ng-click="name='GeeksforGeeks'">
            Click Me 
        button>
    div>
    <script type="text/javascript">
        var app = angular.module('example', []);
        app.controller('basicCntrl', function($scope) {
            $scope.name = "GFG";
        });
    script>
body>
html>

Output:

Also, we can use other HTML tags to make the ng-click work such as a

tag.

Example 3: This example implements a

tag to change the heading content.

HTML


<html>

<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 ng-app="example">
    <div ng-controller="basicCntrl">
        <h1 style="color:green">
            Welcome to {{name}} Learning Portal
        h1>
        
        
        <p style="font-family:Arial;" 
           ng-click="name='GeeksforGeeks'">
            Click Me 
        p>

    div>
    <script type="text/javascript">
        var app = angular.module('example', []);
        app.controller('basicCntrl', function($scope) {
            $scope.name = "GFG";
        });
    script>
body>
html>

Output:

How to directly update a field by using ng-click in AngularJS ?

Explore