Delete Multiple Records Using AngularJS and Rest API

This tutorial help to delete multiple records from the HTML table list using AngularJS and RestAPI. I have already shared angularjs tutorial Dynamically Add/Remove Row in HTML table Using AngularJS.We will extend that tutorial and implement delete multiple row functionality on that code.

We will add a checkbox with each row in the table list. This tutorial help to get the selected value of checkbox. This article will explain how to add check-boxes with each row using ng-repeat directive.

Multiple Selected And Deleted in AngularJS

This tutorial belongs to angular 1.4 so I shared all angularjs code of angular 1.4. We will modify employee JSON data and add a selected column with JSON data.

We will add a new field ‘selected’ into each employee object to identify users who want to delete records, We have Modified JSON data as below:

{"id":"1","employee_name":"Tiger Nixon","employee_salary":"320800","employee_age":"61", "selected:" : false}

We will change HTML listing and add a check box to select all rows or select multiple employee row data.

<table class="table table-bordered" id="tbl_employees">

<thead>

<tr>

<th><input name="all" type="checkbox" ng-click="selectAllEmp()"></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><input name="all" type="checkbox" ng-model="emp.selected"></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>

Added ng-click event and bind with selectAllEmp() method. This method will toggle check and un-check all rows, Created selectAllEmp() method into app.js file to toggle the value of 'selected:true' into all employees obj.

$scope.selectAllEmp = function () {
	$scope.isAll = !$scope.isAll;
	angular.forEach($scope.employees, function (emp) {

		emp.selected = $scope.isAll;
	});
};
}

We have created a checkbox to select all check boxes of rows, Now We will create a button that will call ajax request to delete all selected rows from the database using Restful API.

<div class="well clearfix"><input class="btn btn-danger pull-right" type="button" value="Remove Selected"></div>

removeAll() method calling on click of above HTML button that will find all selected rows and send HTTP Post call to server to delete all records.

$scope.removeAll = function () {
	var removeList = [];
	var selectedIds = new Array();
	angular.forEach($scope.employees, function (emp) {
		if (emp.selected) {
			selectedIds.push(emp.id);
			removeList.push(emp);
		}
	});
	console.log(selectedIds);
	var promise = $http.post("/response/delete", selectedIds);
	promise.success(function (msg) {
		alert(msg);
	}).error(function () {
		alert("Error in delete");
	});
	$scope.employees = removeList;
};

Demo from the below link