Handling 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.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now