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>
<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>
<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>
<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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!