Handling Events In AngularJS

Akshay Phadke
8y
8.2k
0
1

Article

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.

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: