1.

AngularJS Events

Answer»

AngularJS Events
Most of the important chapter here is AngularJS Events. AngularJS has its own HTML event directives. We can add AngularJS event listeners to our HTML elements by using below 17 odd directives.

(1)ng-blur
(2)ng-change
(3)ng-click
(4)ng-copy
(5)ng-cut
(6)ng-dblclick
(7)ng-focus
(8)ng-keydown
(9)ng-keypress
(10)ng-keyup
(11)ng-mousedown
(12)ng-mouseenter
(13)ng-mouseleave
(14)ng-mousemove
(15)ng-mouseover
(16)ng-mouseup
(17)ng-paste

And above event directive help us RUN angularJS function at certain user events.

And AngularJS event will not overright the HTML event and both events gor fires.

In above Directive we have many Mouse Events as given below

(1)ng-mouseover
(2)ng-mouseenter
(3)ng-mousemove
(4)ng-mouseleave

and 3 click events of mouse

(1)ng-mousedown
(2)ng-mouseup
(3)ng-click

We can add mouse events on any HTML element. Below example will help to understand the mouse events. Here i have use event mousemove which will count the movement of mouse:-


AngularJS Mousemove

The ng-click Directive


This ng-click directive defines AngularJS code that will execute on element is being clicked.


AngularJS Mouse Click

Example No 2 for ng-click





AngularJS Mouse Click2

Toggling True and False


If we want to show a section of HTML code hide or show when we click on button. Same we do on dropdown MENU and make the button behave like toggle switch:-


AngularJS Toggle HideShow
In above figure showtopic variable starts out as the boolean value as false. With

myFunc function sets the showtopic variable to opposite of what it is by using the

not operator.

$event Object


We can also PASS $event object as an argument when we CALL the function.The $event object CONTAINS the browser event object. Below example will be more clear to you:-

AngularJS Coordinates


Discussion

No Comment Found

Related InterviewSolutions