×

Html & Html5

The World's best Software Development Study Portal

AngularJS Events


  • Event can be something the browser does, or something a user does.

  • The ng-click directive defines AngularJS code that will be executed when the element is being clicked.

  • If you want to show a section of HTML code when a button is clicked, and hide when the button is clicked again, like a dropdown menu, make the button behave like a toggle switch:

  • We can pass the $event object as an argument when calling the function

  • The $event object contains the browser's event object:




  • AngularJS provides multiple events that can be associated with the HTML controls.
    ng-blur ng-change ng-click
    ng-copy ng-cut ng-dblclick
    ng-focus ng-keydown ng-keypress
    ng-keyup ng-mousedown ng-mouseenter
    ng-mouseleave ng-mousemove ng-mouseover
    ng-mouseup ng-paste


    See an example:

    <div ng-app="myApp" ng-controller="myCtrl"> <button ng-click ="count = count + 1">Click Me!</button> <p>{{ count }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; }); </script>
    Output



    {{ count }}