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++;
    };
});