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. 

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:

👁 Image

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

Output:

👁 Image

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.

Output:

👁 Image