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 the $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, such as Akshay, Hari, Milind, and Raghvan. Initially, I set the values for likes and dislikes to 0 and assigned that to our array.

Now, we have to increase the likes 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 like. 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> sections and in that, we are going to use the 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 the 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">
</td>

Now, we will add the ng-click section after the 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 the 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)" />
                <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.