AngularJs: Delete Table Row tr on button click

Delete Table row in AngularJs: Here in this article will explain how to remove table row in AngularJS. i.e., how to delete table row in AngularJS. In my previous article have explained how to insert/add new rows dynamically to table in Angularjs. We use the ng-repeat directive to bind HTML table with JSON data. So here we have to move an item from ng-repeat. In short, we have to eliminate element from ng-repeat, and in our case, our HTML element is selected table row TR.

As this is a standard function to have a table with data (add and delete rows dynamically) .i.e insert, update, delete function. Let’s head toward and learn how to remove a row in AngularJS.

Steps to delete table row in AngularJS

  1. Setup: Download and import AngularJS file.
  2. HTML Markup: Add HTML table with dummy data and delete button.
  3. AngularJs: Code to delete table selected row on button click.

 

OUTPUT:

AngularJS Delete Table Row , remove item from ng-repeat


 # Setup: Download and import AngularJS file.

You can download AngularJS files from angularjs.org, or you can use Google hosted files. After importing Angularjs file, add Directive ng-app & ng-controller to the body tag.

So now our HTML markup looks like as shown below

<html>
<head>
 <script src="angularjs/angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="myapp" ng-controller="tableController">
 
</body>
<html>

 


# Add HTML table with dummy data and delete button.

Here we have an HTML table with columns ( table heading ) as Name, Gender, City, and Action. Inside Action column, we have our Delete Button which deletes the selected table row. Using ng-repeat directive, we bind data to our HTML table.

Now on the delete button, we added directive ng-click, and with deleteRow() function, selected row gets deleted in angular js. So our HTML markup looks like as written below.

<html>
<head>
 <script src="angularjs/angular.min.js" type="text/javascript"></script>
</head>

<body ng-app="myapp" ng-controller="tableController">
 <table class="table table-stripe" >
 <thead><tr>
 <th>Name</th>
 <th>Gender</th>
 <th> City </th>
 <th> Action </th>
 </tr></thead>
 <tbody>
 <tr ng-repeat="emp in employees">
   <td> {{ emp.Name }} </td>
   <td> {{ emp.Gender }} </td>
   <td> {{ emp.City }} </td>
   <td> <button class='btn btn-danger' ng-click="deleteRow($index)">Delete</button> </td>
 </tr>
 </tbody>
 </table>
</body>
<html>

 

Try It Yourself ⇒

#AngularJs: Code to delete table row on button click.

Here on click delete button our deleteRow() gets fire and using splice we remove the selected rows. .i.e delete table row in angular js

<script type="text/javascript">

 var app = angular.module("myapp", []);

 app.controller("tableController", ['$scope', function ($scope) {

 $scope.employees = [{ 'Name': 'Satinder Singh', 'Gender': 'Male', 'City': 'Bombay' },
 { 'Name': 'Leslie Mac', 'Gender': 'Female', 'City': 'Queensland' },
 { 'Name': 'Andrea ely ', 'Gender': 'Female', 'City': 'Rio' },
 { 'Name': 'Amit Sarna', 'Gender': 'Male', 'City': 'Navi Mumbai' },
 { 'Name': 'David Miller', 'Gender': 'Male', 'City': 'Scouthe'}];

   // delete function this remove the selected table row
   $scope.deleteRow= function (i) {
       $scope.employees.splice(i, 1);
   };

 } ]); 
</script>

 

Conclusion:
Directive ng-repeat is used to Bind data to our HTML table. Directive ng-click is used to on Delete button which fires deleteRow() function. And with splice remove the selected row. Here we able to delete table row on button click

Other Reference:

  1. Stackoverflow.com
Share:    
Satinder Singh

Hi all, am Founder and Author of Codepedia.info, also atypical polyglot programmer from Bombay, India. I have a passion to create, solve, and deploy software applications.
       ForEach ( minute in MyLife ) { myExperience++ ; }



Post Comment


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