Follow by Email

AngularJS Event handling


AngularJs handles the user events using directives. Below are the list of event handler directives:

ng-click:  If any action needs to be performed on the click event, it will listen to the users click event. Below example is calling a function on click of div. 
      ng-click="expression"            
      For ex :



    <button ng-click="getdata()" type="button"></button>

ng-submit:  It will listen to users submit event. It can be used only in the html form element. 
        ng-submit="expression"
        For ex :




      <form ng-submit="myFunc()">
<input type="text" />
        <input type="submit" />   
      </form>

ng-change: It will listen to user change event. It perform action on the change event. 
         ng-change="expression"
         For ex :




   
     
      <select ng-change="getvalue(value)">
        <option value="us">us</option>
        <option value="india">india</option>
      </select>



ng-checked: This directive sets the checked attribute of a checkbox/radiobutton.
It will check for the expression in the ng-checked attribute which is mapped with the ng-model. It is supported by <input> elements of type checkbox / radio.
     ng-checked="expression"


ng-mousedown: will listen to mousedown event. It will get triggered when the user click on an element
   ng-mousedown="expression"
      For ex :




    <div ng-init=" clickcount =0" ng-mousedown="clickcount = clickcount + 1">
Click me!</div>
<h1>
 {{ clickcount }} </h1>


Note : It will works similar to “ng-click” directive.

ng-mouseenter: will listen to mouseover event, It will get triggered when the user performs mouse over on an html element.
    ng-mouseenter="expression"



ng-mouseleave: will listen to mouseleave event, it will get triggered when the user leaves the mouse over an element.
       ng-mouseleave="expression"




ng-mousemove: It will listen to mouse move event, it will get triggered when the user moves the mouse over an element
       ng-mousemouse="expression"



ng-mouseover: will listen to mouseover event, It will get trigerred when the user performs mouse over on an html element.
       ng-mouseover="expression"