This article gives an explanation about how to dynamically add/remove rows Within an HTML table using angular and Bootstrap 4, here I will also explain how to design a master form using Bootstrap 4, how to insert a record from a textbox to HTML Table, and also show you how to use HTML grid in AngularJS.
In My Previous Article, I show/Explained how to Create and Bind HTML Table using AngularJs and also explained File Upload in AngularJs with a progress bar using Bootstrap, and also explained how you can Export JSON Data to Excel/CSV Files using AngularJs with Bootstrap
Yesterday I got a new requirement from my client, actually, they need an HTML grid where they can add/remove rows within the grid as well as also wants to change the value of a particular column of the table as per need directly from the grid, So in this article, I'll just show you how you can add/remove rows dynamically within 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 HTML table using AngularJs.
Requirement
- Create HTML Table using AngularJs directive ng-repeat.
- Add Buttons for Add/Remove Rows from Tabel as well as also add a textbox to insert a new record of data.
- Dynamically Add/Delete Rows from the HTML Table on Button click using AngularJS
Implementation
So, Let's start with an example of students for demonstration, here we will insert some basic details of the student in the HTML grid and we will give a provision 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 linkup with your web page, and for that, you need to write the following code before ending your <head> tag.
<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 insert and bind records in the HTML grid before ending your <body> tag.
<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 with the help of Bootstrap 4 and based on input insert records in an HTML grid using angular, finally, your full source code/HTML Markup looks like same as 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 Analyzed the above code then the first div tag consists angularJs directives ng-app = "MyApp" and ng-controller="MyController" where the ng-app directive is responsible for bootstrapping our app and defining its scope.
In our angularJs application may we can have multiple apps within our same web page, so this directive defines where each and every typical/peculiar or distinct app starts and ends. The angular directive ng-controller is responsible for controlling the flow of data within the application. That 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 populating from the JSON array with angularJs directive ng-repeat where the ng-repeat directive is responsible for repeating the element based on the length of the collection.
When you perform a button click of Insert Button, the function Add created within Controller gets called and within this function, JSON object is created and the value of particular TextBoxes of the data field is assigned to its respective fields properties and created JSON Object is assigned to that created JSON array and again re-populates the created HTML Table using ng-repeat directive.
When you perform a button click of the Remove/Delete Button, the function Remove created within Controller gets called, and there where simply we remove created JSON object using the value of index variable, and this variable is used to get the Index of the Row created by angular directive ng-repeat.
Summary
his article gives an explanation about Dynamically Adding/Removing Row Within an HTML Table in AngularJS using Bootstrap 4.
