How to handle events in angular js

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>&nbsp;
                <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>&nbsp;
                <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.

Related Posts

angular js icon

What is Angular js and what is module and controller ?

Angular js is a javascript framework which is used to build web applications. Benefits of angular js : Dependency injection Two way data binding Testing It uses…

angular js icon

What is two way data binding in angular js ?

Two way data binding keeps the model and view in sync at all times, i.e a change in model, updates the view and a change in view,…

angular js icon

What are angular js directives ? How ng-src and ng-repeat directive works.

Angular js let you extends HTML with new attributes called directives, Angular js has many built in directive two of them are ng-src and ng-repeat.  So if…

angular js icon

What are the common filters used in angular js?

Filters can do three different things, format, sort and filter data. Filter can be used within a binding expression or a directive, to apply filter we use…

Leave a Reply

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