Skip to main content
angularjs-add-remove-table

Dynamically Add/Remove Row in HTML table Using AngularJS

I have shared tutorial Dynamically Add and Remove rows in a Table Using jquery, now I will add the same functionality in angularjs and generate JSON data into angular modal.

This angular tutorial help to add a row into HTML table using angularjs. I will use JSON data to add and remove rows from table. Angularjs using two-way binding so it’s too easy to add and remove row from table.

angularjs-add-remove-table

I am not explaining how to create angular app, I will share the full code at the end of this angularjs tutorial.You can use this logic on angular1.2+,angular 2 or angular 4.

I will create the following functionality in this tutorial

  • Create HTML table listing using JSON data and ng-repeat angularjs directive.
  • Add row button to add record into table using angularjs.
  • Remove row button to remove record from table.

Simple Example Of Add / Remove row in HTML table

We will create a bootstrap form and add some input fields to add employee data into existing json data. We will create add employee and remove the employee button to add/remove record from table using angularjs.

How to add HTML table listing Using ng-repeat

We will take some employee sample data and store it into employees JSON array in the current controller scope. We will use this object into index.html file and iterate on to display record into HTML table.

we will create app.js file and add the below code:

(function(window, angular, undefined){
	'use strict';
	angular.module('TestApp', [
      
	]);
	angular.module('TestApp').controller('testController', testController);
	function testController($scope, $window){
		$scope.employees = [{"id":"1","employee_name":"Tiger Nixon","employee_salary":"320800","employee_age":"61"},{"id":"2","employee_name":"Garrett Winters","employee_salary":"434343","employee_age":"63"},{"id":"3","employee_name":"Ashton Cox","employee_salary":"86000","employee_age":"66"},{"id":"4","employee_name":"Cedric Kelly","employee_salary":"433060","employee_age":"22"},{"id":"5","employee_name":"Airi Satou","employee_salary":"162700","employee_age":"33"}];
		console.log($scope.employees);
	}


})(window, window.angular);

As you can see above code:
TestApp : This is the main angular application.
testController : The controller name which has an employee object array.

Now we will use the above json object array into index.html file, we will create index.html file and add all required dependencies libs like bootstrap, angularjs etc into head section of this file:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
 	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<script src="app.js"></script>
<div class="container" style="padding:10px 10px;">
<h2>AngularJS Add/Remove From HTML Table Using JSON</h2>
<table class="table table-bordered" id="tbl_employees">
    <thead>
        <tr>
            <th>#</th>

            <th>Employee Name</th>

            <th>Age</th>

            <th>Salary</th>

            <th>Action</th>
        </tr>
    </thead>

    <tbody id="tbl_posts_body">
        <tr ng-repeat="emp in employees track by $index">
            <td><span class="sn">{{emp.id}}</span>.</td>

            <td>{{emp.employee_name}}</td>

            <td>{{emp.employee_age}}</td>

            <td>{{emp.employee_salary}}</td>

            <td>
                <a class="btn btn-xs delete-record" ng-click="removeRow($index)"><i class="glyphicon glyphicon-trash"></i></a>
            </td>
        </tr>
    </tbody>
</table>

</div>

We have iterated on employees object and listed all record using ng-repeat directive.We will passed $index as key of array into remove method.We will later use this key to remove employee from list.

How to add Row into HTML table In angularjs

We will create HTML form which has employee name, age, and salary input fields and an add button that is bind with ng-click event. That event call a method to add employee data to existing employee JSON data. Created HTML form with required fields as below:

<div class="well clearfix">
    <fieldset class="scheduler-border">
        <legend class="scheduler-border">Add Employee</legend>
        <form class="form-inline">
            <div class="form-group"><label for="exampleInputName">Name</label> <input id="exampleInputName" class="form-control" type="text" placeholder="Name" /></div>
            <div class="form-group"><label for="exampleInputage">Age</label> <input id="exampleInputAge" class="form-control" type="number" placeholder="age" /></div>
            <div class="form-group"><label for="exampleInputSalary">Salary</label> <input id="exampleInputSalary" class="form-control" type="number" placeholder="salary" /></div>
            <button class="btn btn-primary" type="button"><i class="glyphicon glyphicon-plus"></i>&nbsp;Add Row</button>
        </form>
    </fieldset>
</div>

We have added addEmployee() method on the button to add records to table. We will create a method into the controller,

$scope.addEmployee = function () {
	//Add the new item to the Array.
	var employee = {
		id: $scope.employees.length+1,
		employee_name : $scope.name,
		employee_age : $scope.age,
		employee_salary : $scope.salary
	};
	$scope.employees.push(employee);
}

We have create employee empty object and assign all input fields model values, finally pushed into employees main object array.

How to Remove Row from HTML table Using angularjs

Create HTML table listing and associated remove button with each row. We will create removeRow() method into testController and remove that row from employee’s object array.

$scope.removeRow = function (index) {
	//Find the record using Index from Array.
	var name = $scope.employees[index].employee_name;
	if ($window.confirm("Do you want to delete: " + name)) {
		//Remove the item from Array using Index.
		$scope.employees.splice(index, 1);
	}
}

We have created an employee empty object and assigned all input fields model values, finally pushed into employee main object array.

You can download source code and Demo from below link.

Leave a Reply

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