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.



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.

var mypartone = angular.module("mymodule", []).controller("myController", function($scope)
{
    var persons = [{
        name: "Akshay",
        likes: 0,
        dislikes: 0
    }, {
        name: "Hari",
        likes: 0,
        dislikes: 0
    }, {
        name: "Milind",
        likes: 0,
        dislikes: 0
    }, {
        name: "Raghvan",
        likes: 0,
        dislikes: 0
    }, ];
    $scope.persons = persons;
});

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:

$scope.incrementLikes = function(per)
{
    per.likes++;
}

$scope increments likes. In that function, we have to increment likes. So we used ++ . Similarly, we need to do it for dislikes.

$scope.incrementDislikes = function(per)
{
    per.dislikes++;
}

So, our final code is:

var mypartone = angular.module("mymodule", []).controller("myController", function($scope)
{
    var persons = [{
        name: "Akshay",
        likes: 0,
        dislikes: 0
    }, {
        name: "Hari",
        likes: 0,
        dislikes: 0
    }, {
        name: "Milind",
        likes: 0,
        dislikes: 0
    }, {
        name: "Raghvan",
        likes: 0,
        dislikes: 0
    }, ];
    $scope.persons = persons;
    $scope.incrementLikes = function(per) {
        per.likes++;
    }
    $scope.incrementDislikes = function(per) {
        per.dislikes++;
    }
});

Now, we will see how we are going to display that. We need to display it in a table section. 

<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
</table>

Now, we need to have four <th> sections to display Name, Likes, Dislikes and buttons.

So, let's add 4 <th> sections.

<th>Name</th>
<th>Likes</th>
<th>Dislikes</th>
<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.

<tbody>
<tr ng-repeat=”per in persons”>
</tr>
</tbody>

Now, we need to display those records. So, we are going to use binding expression.

<tbody>
        <tr ng-repeat="per in persons">
            <td>{{per.name}}</td>
            <td>{{per.likes}}</td>
             <td>{{per.dislikes}}</td>
        </tr>

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

$scope.incrementLikes = function (per)
 {
     per.likes++;
  }

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:

<input type="button" value="Like" ng-click="incrementLikes(per)" />

Similarly, let's do it for dislike button.

<td>
<input type="button" value="DisLike" ng-click="incrementDislikes(per)" />
</td>

Final Code

<table>
    <thead>
        <tr>
            <th>Name</th>
             <th>Likes</th>
             <th>Dislikes</th>
             <th>Likes/Dislikes</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="per in persons">
            <td>{{per.name}}</td>
            <td>{{per.likes}}</td>
             <td>{{per.dislikes}}</td>
            <td>
                <input type="button" value="Like" ng-click="incrementLikes(per)" />

            </td>
            <td>
                <input type="button" value="DisLike" ng-click="incrementDislikes(per)" />
            </td>
        </tr>

    </tbody>
</table>

So let's run our solution and see what output we get.
,

We get the desired output.

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