Blog for web designers

Event handling in AngularJS

Event handling in AngularJS

Event handling in AngularJS with increment and decrement example.

Hello guys. If you are reading this post then you must be aware of Javascript and AngularJS basic.

We can handle event in AngularJS by using some AngularJS directive. There are many directive in AngularJS but in this tutorial we will discuss one of them which is widely used. Event handling in AngularJS is such a easy way to control any event.

Copy the below code and paste it into the script.js or any desire file you like.


var app = angular.module("myApp", []);

app.controller('likes_dislikes', function($scope){
	var technologies = [
		{name:"AngularJS", likes:0, disLikes:0},
		{name:"Jquery", likes:0, disLikes:0},
		{name:"React.JS", likes:0, disLikes:0},
		{name:"Node.js", likes:0, disLikes:0},
		{name:"stellar.js", likes:0, disLikes:0},

	]
	$scope.technologies = technologies;

	$scope.incrementLikes = function (technology) {
		technology.likes++;
	}
	$scope.incrementDislikes = function (technology) {
		technology.disLikes++;
	}

})

Now copy the below HTML and paste it into your HTML page. Please check the path of script file. In my case I have put the script.js file inside the js folder and assign the path accordingly.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="likes_dislikes">
<table>
<thead>
<tr>
<th>Framework</th>
<th>Likes</th>
<th>Dislikes</th>
<th>Buttons</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="technology in technologies">
<td>{{technology.name}}</td>
<td>{{technology.likes}}</td>
<td>{{technology.disLikes}}</td>
<td>
<input type="button" ng-click="incrementLikes(technology)" value="Likes">
<input type="button" ng-click="incrementDislikes(technology)" value="Dislikes">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Now you can click on Like or Dislike button to increase the number.

Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.