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:
<element ng-click="expression">
Contents...
</element>
Example 1: This example calls a function to change the field value after clicking on the button.
HTML
<!DOCTYPE html><html ng-app="example"><head> <title> How to directly update a field by using ng-click in AngularJS? </title> <script src= </script></head><body> <div ng-controller="basicCntrl"> <h1 style="color:green"> Welcome to {{name}}! </h1> <!-- on button click the change() function is called from $scope --> <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
<!DOCTYPE html><html ng-app="example"><head> <title> How to directly update a field by using ng-click in AngularJS? </title> <script src= </script></head><body> <div ng-controller="basicCntrl"> <h1 style="color:green"> {{name}} Learning Together </h1> <!-- on button click the name is changed directly --> <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 <p> tag.
Example 3: This example implements a <p> tag to change the heading content.
HTML
<!DOCTYPE html><html><head> <title> How to directly update a field by using ng-click in AngularJS? </title> <script src= </script></head><body ng-app="example"> <div ng-controller="basicCntrl"> <h1 style="color:green"> Welcome to {{name}} Learning Portal </h1> <!-- on paragraph click the name is changed directly --> <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:
Please Login to comment...