AngularJs events with examples

AngularJs Events

AngularJs events are used to handle the dom events. Like mouse events,  key events.

following events are providing by angular js which makes our task easy.

  •     ng-show
  •     ng-click
  •     ng-blur
  •     ng-change
  •     ng-copy
  •     ng-paste
  •     ng-cut
  •     ng-dblclick
  •     ng-focus
  •     ng-keydown
  •     ng-keypress
  •     ng-keyup
  •     ng-mousedown
  •     ng-mouseenter
  •     ng-mouseleave
  •     ng-mousemove
  •     ng-mouseover
  •     ng-mouseup

Angular JS ng-show directive

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app>

Show HTML: <input type="checkbox" ng-model="val">

<div ng-show="val">

<p>Welcome to Codebun.com</p>
</div>

</body>
</html>

Angular JS ng-click directive

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app>
<button ng-click="c = c + 1" ng-init="c=0">OK</button>
<p>Button Count is {{c}} .</p>
</body>
</html>

AngularJS ng-hide Directive

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app>

<input type="text" ng-model="x">

<div ng-hide="x">

<p>Please type something in input box and HIDE ME</p>
</div>

</body>
</html>

 

Angular JS ng-blur directive

<element ng-click="expression"></element>

 

Angular $HTTP sevice

Subscribe Codebun on youtube

Add a Comment

Your email address will not be published. Required fields are marked *

3 × three =