Handling Events In AngularJS

In this article, you will learn how to handle events in AngularJS.

Overview

In this article, we will go through how events are handled in AngularJS. Here, we will take a simple example. To start with, we will display various personnel profiles and will show how many likes/dislikes a profile gets, using the buttons for likes and dislikes respectively, that are associated with it.

output

First, go through my previous article ng-repeat directive in AngularJS because we are going to use ng-repeat directive here .

Introduction

Let's start.  As we had discussed, we will first display profiles of various persons. We need to create an array for this. So, do it.

Var persons = [] ;

Now, in that person's array, we will pass name; i.e., respective profile name and likes and dislikes. Initially, we will set that to 0; and finally, we will pass that to $scope parameter.

  1. var mypartone = angular.module("mymodule", []).controller("myController"function($scope)  
  2. {  
  3.     var persons = [{  
  4.         name: "Akshay",  
  5.         likes: 0,  
  6.         dislikes: 0  
  7.     }, {  
  8.         name: "Hari",  
  9.         likes: 0,  
  10.         dislikes: 0  
  11.     }, {  
  12.         name: "Milind",  
  13.         likes: 0,  
  14.         dislikes: 0  
  15.     }, {  
  16.         name: "Raghvan",  
  17.         likes: 0,  
  18.         dislikes: 0  
  19.     }, ];  
  20.     $scope.persons = persons;  
  21. });  
Alright. So, we had various profile names, as Akshay, Hari, Milind and Raghvan. Initially, I have set the values for likes and dislikes to 0 and assigned that to our array.

Now, we have to increase thelikes and dislikes functionality. For that, you need to create a function for likes and dislikes. Let's do that.

Now, I have created a function called Likes; and assigned it to $scope object, as:
  1. $scope.incrementLikes = function(per)  
  2. {  
  3.     per.likes++;  
  4. }  
$scope increments likes. In that function, we have to increment likes. So we used ++ . Similarly, we need to do it for dislikes.
  1. $scope.incrementDislikes = function(per)   
  2. {  
  3.     per.dislikes++;  
  4. }  
So, our final code is:
  1. var mypartone = angular.module("mymodule", []).controller("myController"function($scope)  
  2. {  
  3.     var persons = [{  
  4.         name: "Akshay",  
  5.         likes: 0,  
  6.         dislikes: 0  
  7.     }, {  
  8.         name: "Hari",  
  9.         likes: 0,  
  10.         dislikes: 0  
  11.     }, {  
  12.         name: "Milind",  
  13.         likes: 0,  
  14.         dislikes: 0  
  15.     }, {  
  16.         name: "Raghvan",  
  17.         likes: 0,  
  18.         dislikes: 0  
  19.     }, ];  
  20.     $scope.persons = persons;  
  21.     $scope.incrementLikes = function(per) {  
  22.         per.likes++;  
  23.     }  
  24.     $scope.incrementDislikes = function(per) {  
  25.         per.dislikes++;  
  26.     }  
  27. });  
Now, we will see how we are going to display that. We need to display it in a table section. 
  1. <table>  
  2.     <thead>  
  3.         <tr>  
  4.             <th></th>  
  5.         </tr>  
  6.     </thead>  
  7. </table>  
Now, we need to have four <th> sections to display Name, Likes, Dislikes and buttons.

So, let's add 4 <th> sections.
  1. <th>Name</th>  
  2. <th>Likes</th>  
  3. <th>Dislikes</th>  
  4. <th>Likes/Dislikes</th>  
Now, we need to loop through those records of various names. So, we are going to use <tbody> sectionx and in that we are going to use ng-repeat directive to loop those records.

So, add the <tbody> section.
  1. <tbody>  
  2. <tr ng-repeat=”per in persons”>  
  3. </tr>  
  4. </tbody>  
Now, we need to display those records. So, we are going to use binding expression.
  1. <tbody>  
  2.         <tr ng-repeat="per in persons">  
  3.             <td>{{per.name}}</td>  
  4.             <td>{{per.likes}}</td>  
  5.              <td>{{per.dislikes}}</td>  
  6.         </tr>  
  7.   
  8.     </tbody>  
Now, we need to create two buttons for likes and dislikes. So, we create two buttons with the help of an input tag. Let's do it.

<td>
<input type="button" value="Like"


Now, we will add ng-click section after value. What this will do is to call the function.
  1. $scope.incrementLikes = function (per)
  2.  {  
  3.      per.likes++;  
  4.   }  
to increment our likes.

Now, we will pass that function to ng-click to increment those likes.

ng-click="incrementLikes(per)"

So, our final like button code is, as follows:
  1. <input type="button" value="Like" ng-click="incrementLikes(per)" />  
Similarly, let's do it for dislike button.
  1. <td>  
  2. <input type="button" value="DisLike" ng-click="incrementDislikes(per)" />  
  3. </td>  
Final Code
  1. <table>  
  2.     <thead>  
  3.         <tr>  
  4.             <th>Name</th>  
  5.              <th>Likes</th>  
  6.              <th>Dislikes</th>  
  7.              <th>Likes/Dislikes</th>  
  8.         </tr>  
  9.     </thead>  
  10.     <tbody>  
  11.         <tr ng-repeat="per in persons">  
  12.             <td>{{per.name}}</td>  
  13.             <td>{{per.likes}}</td>  
  14.              <td>{{per.dislikes}}</td>  
  15.             <td>  
  16.                 <input type="button" value="Like" ng-click="incrementLikes(per)" />  
  17.   
  18.             </td>  
  19.             <td>  
  20.                 <input type="button" value="DisLike" ng-click="incrementDislikes(per)" />  
  21.             </td>  
  22.         </tr>  
  23.   
  24.     </tbody>  
  25. </table>  
So let's run our solution and see what output we get.
,
output
We get the desired output.

Conclusion: This was about handling events in AngularJS . Hope this article was helpful.