In this blog we will understand how to handle event actions like clicking a button. The common way to handle events is through the functions or methods.
In this blog we will create a table with the animals name and their like and dislikes and user will be able to give like or dislike to particular animal according to their intrest.
So first we need to create a HTML file and include angular js to the file. For this tutorial we are adding bootstrap to our projects, you just need to add a CDN link to the project to use bootstrap css.
<!DOCTYPE html>
<html lang=“en”>
<head>
<!–Adding Bootstrap–>
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css”
rel=“stylesheet”
integrity=“sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3”
crossorigin=“anonymous”>
<!–Adding Angular JS–>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”>
</script>
You can copy the above link to use bootstrap.
Now we will create a module and controller and a object or collection to store animals record.
<script>
var app = angular.module(‘newApp’, []);
app.controller(‘newCtrl’, function($scope) {
var animals = [
{name:“dog”,like:8,dislike:1},
{name:“cat”,like:1,dislike:3},
{name:“fox”,like:2,dislike:4},
{name:“lion”,like:5,dislike:1}
];
$scope.animals= animals;
});
</script>
So now we have animals object and we can use it on body to display all records in table with some buttons to increment and decrement like and dislike respected to their animals.
lets create some function to increment and decrement likes and dislikes.
$scope.increment = function(animal){
animal.like++;
}
$scope.decrement = function(animal){
if(animal.dislike!=0){
animal.dislike–;
}
}
With these functions we can increment and decrement likes and dislikes, in decrement function we are also checking for not equal to 0, because dislikes should not be a negative value, so we are stopping disliking once the value of dislikes is 0.
In html file body we are using ng-repeat to iterate animals data and we are using bootstrap table to display these records.
<body>
<div class=“col-md-6” ng-app=“newApp” ng-controller=“newCtrl”>
<table class=“table table-striped”>
<thead>
<tr>
<th scope=“col”>Name</th>
<th scope=“col”>Likes</th>
<th scope=“col”>Dislikes</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=“item in animals”>
<td>{{item.name}}</td>
<td>{{item.like}}</td>
<td>{{item.dislike}}</td>
<td>
<button ng-click=“increment(item)” class=“btn btn-primary”>Like</button>
<button ng-click=“decrement(item)” class=“btn btn-danger”>Dislike</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
On clicks of like button we are calling increment function and ng-click is a directive to track click event on button.
On dislike we are calling decrement function to decrease the current dislike value of perticular animal.
Complete code you can check below
<!DOCTYPE html>
<html lang=“en”>
<head>
<!–Adding Bootstrap–>
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css”
rel=“stylesheet”
integrity=“sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3”
crossorigin=“anonymous”>
<!–Adding Angular JS–>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”>
</script>
<script>
var app = angular.module(‘newApp’, []);
app.controller(‘newCtrl’, function($scope) {
var animals = [
{name:“dog”,like:8,dislike:1},
{name:“cat”,like:1,dislike:3},
{name:“fox”,like:2,dislike:4},
{name:“lion”,like:5,dislike:1}
];
$scope.animals= animals;
$scope.increment = function(animal){
animal.like++;
}
$scope.decrement = function(animal){
if(animal.dislike!=0){
animal.dislike–;
}
}
});
</script>
</head>
<body>
<div class=“col-md-6” ng-app=“newApp” ng-controller=“newCtrl”>
<table class=“table table-striped”>
<thead>
<tr>
<th scope=“col”>Name</th>
<th scope=“col”>Likes</th>
<th scope=“col”>Dislikes</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=“item in animals”>
<td>{{item.name}}</td>
<td>{{item.like}}</td>
<td>{{item.dislike}}</td>
<td>
<button ng-click=“increment(item)” class=“btn btn-primary”>Like</button>
<button ng-click=“decrement(item)” class=“btn btn-danger”>Dislike</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
So now you know how you can handle events and manipulate html records, let’s look at the output for this code.
This is default output screen with records present on current object, now lets click on 5 times to the like button for the cat and 3 times to the dislike button of lion and see the output.
So now what happen for cat total likes will be 6 and for lion total likes will be 0 because after one click it will become 0 and according to our condition we can not decrease dislike value below 0.
Now the output screen will look like this
That’s all for this blog, i hope you understand it clearly, please share if you like this blog.
