MS.NET COMPLETE GADGET: Events In Angular js

Aug 3, 2015

Events In Angular js

AngularJS provides event listener directives to handle HTML events like mouse click, double-click, key-press, key-down, text-change events etc.

AngularJS Event Listener Directives

You can attach an event listener to an appropriate HTML element by using one of the following AngularJS event listener directives:

ng-click
ng-dbl-click
ng-keydown
ng-keyup
ng-keypress
ng-change
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover

AngularJS Events Example

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="Ctrl">
<h2>Click Event</h2>
<button ng-click="ClickMe()">Click me!</button>
  
<span>{{ clickCount }}</span>

<h2>Double Click Event</h2>
<button ng-dblclick="DblClickMe()">Click me!</button>
  
<span>{{ dblClickCount }}</span>

<h2>Change Event</h2>
<input type="text" ng-model="FirstName" ng-change="ChangeValue()" />
  
<span>{{ changeCount }}</span>

<h2>Keyup and Keydown Events</h2>
<input type="text" ng-model="LastName" ng-keyup="keyUp()" ng-keydown="keyDown()"/>
  
<span>KeyUp : {{ keyUpCount }}</span>
<span> & KeyDown : {{ keyDownCount }}</span>

</div>

<script type="text/javascript">
    var app= angular.module("app",[]);

    app.controller("Ctrl",function($scope){
      $scope.clickCount=0;
      $scope.dblClickCount=0;
      $scope.changeCount=0;
      $scope.keyUpCount=0;
      $scope.keyDownCount=0;

      $scope.ClickMe=function()
      {
        $scope.clickCount +=1;
      }

      $scope.DblClickMe=function()
      {
        $scope.dblClickCount +=1;
      }

      $scope.ChangeValue=function()
      {
        $scope.changeCount +=1;
      }

      $scope.keyUp=function()
      {
        $scope.keyUpCount +=1;
      }

      $scope.keyDown=function()
      {
        $scope.keyDownCount +=1;
      }

    });
</script>
</body>
</html>

Click Event

0

Double Click Event

0

Change Event

0

Keyup and Keydown Events

KeyUp : 0 &

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)