Thursday, March 26, 2015

ng-keydown event

AngularJS provides various keyboard events to track events raised by user interaction with the keyboard like KeyDown, KeyUp, KeyPress etc, in this post we shall see on how to handle the keydown event using AngularJS

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

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

AngularJS Keyboard 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.

Saturday, March 21, 2015

ng-change directive with checkbox

Change events are used to handle user interactions with controls like TextBox, Dropdown list, checkboxes etc. In this post we shall see on how to handle change events associated with the checkbox control.

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 example the checkbox control has a ng-change directive which binds the events from the checkbox controller to the function HandleChange(), when the user checkes/un-checks the checkbox control the HandleChange() function is called and the currently selection status is displayed in the label.

ng-change directive with Dropdown list

Change events are used to handle user interactions with controls like TextBox, Dropdown list, checkboxes etc. In this post we shall see on how to handle change events associated with the dropdown control.

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 example the dropdown list control has as ng-change directive which binds the events from the dropdown list controller to the function HandleChange(), when the user changes the selection in the dropdown list control the HandleChange() function is called and the currently selected language is displayed in the label.

Tuesday, March 17, 2015

ng-change directive with Textbox

Change events are used to handle user interactions with controls like TextBox, Dropdown list, checkboxes etc. In this post we shall see on how to handle change events associated with the textbox control.

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 example the textbox control has as ng-change directive which binds the events from the textbox controller to the function HandleChange(), the letters entered by the user are immediately handled by the HandleChange() function and the letters are displayed in the label.