Date:

Share:

Add/Remove Row Dynamically Within HTML Table Using Angular

Related Articles

This article explains how to dynamically add/remove rows inside an HTML table using angular and Bootstrap 4, here I will also explain how to design a master form using Bootstrap 4, how to add a record from a text box to an HTML Table, and also show you how to use an HTML grid in AngularJS.

In my previous article, I show/explained how to do Create and link an HTML table using AngularJs And also explained Uploading files in AngularJs with a progress bar using BootstrapAnd also explained how you can Export JSON data to Excel/CSV files using AngularJs with Bootstrap

Yesterday I received a new requirement from my client, actually, they need an HTML grid where they can add/remove rows within the grid, as well as want to change the value of a certain column in the table as needed directly from the grid, so in this article, I will just show you how you can add /remove rows dynamically inside an HTML table using Angular Js and bootstrap 4 and in my next article I will show you how you can change/update the value of any particular column of an HTML table using AngularJs.

demand

  1. Create an HTML table using the AngularJs ng-repeat directive.
  2. Add buttons to add/remove rows from a table, as well as add a text box to add a new record of data.
  3. Dynamically add/delete rows from an HTML table at the click of a button using AngularJS

Application

So we will start with students example for demonstration, here we will enter some basic details of the student in the HTML grid and give an instruction to the user where the user can also delete any record directly from the HTML grid.

Before, start writing code you need a CSS style sheet and script connection with your web page, and for that, you need to write the following code before end tag your.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

Now, you need to write the following script to add and bind records in the HTML grid before the end tag your.

<script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController'function ($scope, $window) {
            $scope.Students = [
                { FirstName: "Nikunj", LastName: "Satasiya", University: "RK University", Branch: "CE", City: "Surat" },
                { FirstName: "Hiren", LastName: "Dobariya", University: "RK University", Branch: "CE", City: "Rajkot" },
                { FirstName: "Vivek", LastName: "Ghadiya", University: "RK University", Branch: "CE", City: "Jamnagar" },
                { FirstName: "Pratik", LastName: "Pansuriya", University: "RK University", Branch: "CE", City: "Rajkot" }
            ];
 
            $scope.Add = function () {
                //Add the new item to the Array.
                var customer = {};
                customer.FirstName = $scope.FirstName;
                customer.LastName = $scope.LastName;
                customer.University = $scope.University;
                customer.Branch = $scope.Branch;
                customer.City = $scope.City;
                $scope.Students.push(customer);
 
                //Clear the TextBoxes.
                $scope.Name = "";
                $scope.Country = "";
            };
 
            $scope.Remove = function (index) {
                //Find the record using Index from Array.
                var name = $scope.Students[index].Name;
                if ($window.confirm("Do you want to delete: " + name)) {
                    //Remove the item from Array using Index.
                    $scope.Students.splice(index, 1);
                }
            }
        });
    </script>

Now, you need to create/design a form using Bootstrap 4 and based on input add HTML grid records using Angular, finally your complete source code/HTML markup looks like shown below.

HTML markup

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body class="container">
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController'function ($scope, $window) {
            $scope.Students = [
                { FirstName: "Nikunj", LastName: "Satasiya", University: "RK University", Branch: "CE", City: "Surat" },
                { FirstName: "Hiren", LastName: "Dobariya", University: "RK University", Branch: "CE", City: "Rajkot" },
                { FirstName: "Vivek", LastName: "Ghadiya", University: "RK University", Branch: "CE", City: "Jamnagar" },
                { FirstName: "Pratik", LastName: "Pansuriya", University: "RK University", Branch: "CE", City: "Rajkot" }
            ];
 
            $scope.Add = function () {
                //Add the new item to the Array.
                var customer = {};
                customer.FirstName = $scope.FirstName;
                customer.LastName = $scope.LastName;
                customer.University = $scope.University;
                customer.Branch = $scope.Branch;
                customer.City = $scope.City;
                $scope.Students.push(customer);
 
                //Clear the TextBoxes.
                $scope.Name = "";
                $scope.Country = "";
            };
 
            $scope.Remove = function (index) {
                //Find the record using Index from Array.
                var name = $scope.Students[index].Name;
                if ($window.confirm("Do you want to delete: " + name)) {
                    //Remove the item from Array using Index.
                    $scope.Students.splice(index, 1);
                }
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
 
        </br>
 
        <center><h1>Dynamically Add/Remove Row Within HTML Table with AngularJs & Bootstrap 4</ht></center>
        </br>
 
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputCity">FirstName</label>
                <input type="text" ng-model="FirstName" class="form-control" placeholder="First Name" aria-label="FirstName" aria-describedby="basic-addon1">
            </div>
            <div class="form-group col-md-6">
                <label for="inputCity">LastName</label>
                <input type="text" ng-model="LastName" class="form-control" placeholder="Last Name" aria-label="LastName" aria-describedby="inputGroup-sizing-default">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-12">
                <label for="inputCity">College/University</label>
                <input type="text" ng-model="University" class="form-control" placeholder="College/University" aria-label="University" aria-describedby="basic-addon1">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputState">Branch</label>
                <input type="text" ng-model="Branch" placeholder="Branch" class="form-control" aria-label="Branch" id="inputBranch">
            </div>
            <div class="form-group col-md-6">
                <label for="inputCity">City</label>
                <input type="text" ng-model="City" placeholder="City" class="form-control" aria-label="City" id="inputCity">
            </div>
        </div>
        <input class="btn btn-success" type="button" ng-click="Add()" value="InsertRow" /></td>
        <th>
            </br>
            </br>
            <table class="table table-hover">
                <tr>
                    <th scope="col">FirstName</th>
                    <th scope="col">LastName</th>
                    <th scope="col">College/University</th>
                    <th scope="col">Branch</th>
                    <th scope="col">City</th>
                    <th></th>
                </tr>
                <tbody ng-repeat="m in Students">
                    <tr>
                        <td scope="row">{{m.FirstName}}</td>
                        <td>{{m.LastName}}</td>
                        <td>{{m.University}}</td>
                        <td>{{m.Branch}}</td>
                        <td>{{m.City}}</td>
                        <td><input class="btn btn-danger" type="button" ng-click="Remove($index)" value="Remove" /></td>
                    </tr>
                </tbody>
            </table>
    </div>
</body>
</html>

explanation

If you analyze the code above then the first div tag consists of angularJs directives ng-app = “MyApp” and ng-controller=”MyController” where the ng-app directive is responsible for initializing our app and setting scope.

In our angularJs application, we may be able to have multiple apps on our same web page, so this directive defines where each typical/odd or distinct app starts and ends. The Angular directive ng-controller is responsible for controlling the flow of data within the application. It is a JavaScript object that contains properties/attributes and functions.

In our application, we have a JSON array with some dummy data and our HTML table is populated from the JSON array with the angularJs ng-repeat directive where the ng-repeat directive is responsible for repeating the element based on the length of the collection.

When you click the insert button, the add function created inside the controller will be called and inside this function, a JSON object is created and the value of certain text boxes of the data field is assigned to its respective fields properties and the created JSON object is assigned to the created JSON array and again repopulates the created HTML table using the ng-repeat directive.

When you click the Remove/Delete button, the Remove function created inside the Controller is called, and there we simply remove a JSON object created using the value of an index variable, and this variable is used to get the row index created by the Angular ng-repeat directive.

Summary

His article explains how to dynamically add/remove a row within an HTML table in AngularJS using Bootstrap 4.

Source

Popular Articles