ng-keypress event

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

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

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

ng-keyup event

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

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

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

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.

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.

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.

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 Directives Overview

AngularJS Directives Overview

What are AngularJS Directives ng-init directive ng-repeat directive Using ng-repeat to process an array of objects Using ng-repeat to Process JSON response from the server Ajax calls ng-app directive ng-model Using ng-model directive with a Controller ng-bind directive ng-model vs ng-bind ng-bind-html $scope object ng-controller Maintaining controllers in a separate .js file ng-click ng-mouseover ng-submit ng-view ng-include directive ng-view vs ng-include ng-class ng-checked directive

ng-checked directive

The ng-checked directive is used with checkbox controls to set the checkbox status to checked/un-checked. The status of the checkbox can be controlled from a variable/property in the model object, just set the model property value to the ng-checked directive and the checkbox will automatically change its state based on the value of the property.

In the following example the $scope.checkedStatus property controls the state of the checkbox control.

ng-class directive

The ng-class directive is used to dynamically alter the style class applied to an element in the HTML page based on the value binding of a different element or $scope item. This directive can be used to apply selective style elements to elements in the HTML page based on user preferences or values from the model or other elements in the page.

The ng-class directive evaluates an expression and derives the class to be applied based on the result of the expression. The following is the syntax for the ng-class directive.

ng-view vs ng-include directive

Both the ng-view and ng-include directives are used to plug in content to the main html page.

The ng-include directive is more like a static content addition to the main page, while using this directive the page / content to be included in the main page is defined in the main .html page. This directive can be used when we want to include static content like top-menu, left-menu, header, footer, disclaimer etc to the main page.

The ng-view directive allows dynamic content addition to the parent page based on the URL provided by the end user, this directive helps in implementing routing feature similar to Asp.Net MVC routing, the behavior of the page will vary based on the URL requested by the end user. This directive can be used to add dynamic content to the page, like master-child, list-details content based on requests provided by the end user.

To learn more about these directives, refer to the following posts.
ng-view
ng-include

ng-include directive

The ng-include directive allows us to embed content of other .html pages in a parent html page, these are similar to the partial view concept in MVC, we can create separate .html with parts of content and embed them in the parent page using the ng-include directive.

The following is a simple example of using ng-include to add content from .html pages to a parent .html page.

ng-view directive

The ng-view is a placeholder directive defined on the main page, it indicates that this div/panel will be replaced with different views at run-time based on the routing defined on the page URL.

We shall see detailed implementation of the ng-view directive in the later posts when we look into Routing feature in AngularJS, for now below is the syntax for using ng-view directive.

ng-submit directive

Using the ng-submit directive we can make Ajax calls to the methods in the controller when the form is submitted. The conventional form tag and action method will post the page data and re-direct to a new page, the ng-form directive instead allows us to call a JavaScript method in the controller and pass objects to the controller method.

The following example shows a simple implementation of the form submit, in this example we just display a message from the submit function, in real time we can do complex implementations like making Ajax calls to the Server.

ng-mouseover directive

As the name suggests the ng-mouseover directive is used to handle mousehover events from controls in the view layer. The ng-mouseover directive can be associated with any type of controls like buttons, links, div panels etc.

The syntax for the ng-mouseover directive is as follows

ng-mouseover = “<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-mouseover directive gets executed and performs appropriate updates in the model ($scope) and the view.

The following example shows how the ng-mouseover directive associated with the Hover Mouse button shows and hides the Name based on the users mouse movement.

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.