ng-click event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mousedown, mouseover, mouseover etc, in this post we shall see on how to handle the click event using AngularJS

AngularJS provides ng-click directive to handle mouse click events raised by the user, click event can be handled by associating the ng-click directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-click directive to handle click events raised by the user.

ng-click directive

As the name suggests the ng-click directive is used to handle click events from controls in the view layer. The ng-click directive is commonly associated with button controls to trigger events from the view to the controller layer, but they can be associated with any type of controls like dropdowns, links etc.

The syntax for the ng-click directive is as follows

ng-click = “<Function to be called in the controller layer>”

The function is defined in the controller under $scope, when the user triggers the event the function associated with the ng-click directive gets executed and performs appropriate updates in the model ($scope) and the view.

The following example shows how the ng-click directive associated with the Clear button clears the properties FName and LName in the model and view.