Introduction
This article gives an explanation about how to dynamically add/remove row Within 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 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 progress bar using bootstrap and also explained how you can Export JSON Data to Excel/CSV File using AngularJs with Bootstrap
Yesterday I got a new requirement from my client, actually they need HTML grid where they can add/remove rows within grid as well as also wants to change value of particular column of table as per need directly from 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 value of any particular column of HTML table using AngularJs.
Requirement
1) Create HTML Table using AngularJs directive ng-repeat.
2) Add Buttons for Add/Remove Rows from Tabel as well as also add a textbox to insert a new record of data.
3) 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 HTML grid and we will give provision to the user where the user can also delete any record directly from HTML grid.
Before, start writing code you need CSS style sheet and Script linkup with your web page, and for that, you need to write following code before end 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 following script to insert and bind records in HTML grid before end 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 help of Bootstrap 4 and based on input insert records in 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 above code then first div tag consists angularJs directives ng-app = "MyApp" and ng-controller="MyController" where the ng-app directive is responsible for bootstrapping our app 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 control the flow of data within the application. That is a JavaScript object that contains properties/attributes, and functions.
In our application we have JSON array with some dummy data and our HTML table is populating from JSON array with angularJs directive ng-repeat where the ng-repeat directive is responsible for repeats the element based on the length of the collection.
When you perform button click of Insert Button, function Add created within Controller gets called and within this function JSON object is created and value of particular TextBoxes of 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 button click of Remove/Delete Button, function Remove created within Controller gets called and there where simply we removing created JSON object with 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 Add/Remove Row Within HTML Table in AngularJS with using Bootstrap 4.
