Change Events

AngularJS provides a set of events to handle user interactions in the UI layer, AngularJS events can be broadly classified into the following 3 categories.

Change Events – To handle triggered from controls like TextBox, Dropdown, checkbox etc.
Keyboard Events – To handle events triggered by user typing keys in the keyboard.
Mouse Events – To handle mouse events like mouse_up, mouse_down, etc

In this post we shall see on the various possible change events provided by AngularJS.

AngularJS provides ng-change directive to handle change events associated with controls like textbox, dropdown list, checkboxes etc, these events are triggered when user preforms any action on these controls.

Change event is triggered in textbox control when the user types any characters in the textbox.

Change event is triggered in a dropdown list control when the user changes the current selection in the dropdown list control.

Change event is triggered in a checkbox control when the user performs a check/uncheck action in the checkbox.

Change event in these controls can be handled by creating a handler function and associating the event to the function using the ng-change directive. The following is the syntax for the ng-change directive and the handler function.

ng-change="HandleChange()
In the following post we shall see in detail on how the change event is handled in each of these controls.