Codingzee provides articles on asp.net, .net core, mvc, c#, vb.net, sql server, angular, html, bootstrap, javascript, jquery, web api and seo for students and beginner developers.
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.
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.
$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.
$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> <divng-app="MyApp"ng-controller="MyController">
</br>
<center><h1>Dynamically Add/Remove Row Within HTML Table with AngularJs & Bootstrap 4</ht></center> </br>
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.
Codingzee provides articles and blogs on web and software development for beginners as well as free Academic projects for final year students in Asp.Net, MVC, C#, Vb.Net, SQL Server, Angular Js, Android, PHP, Java, Python, Desktop Software Application and etc.