Delete Table row in AngularJs: Here in this article will explain in angularjs how to remove or delete a table row. In my previous article have explained how to insert or add new rows dynamically to HTML table using Angularjs. We have to use ng-repeat directive to bind HTML table with JSON data so that our table contains some data from which we delete selected rows.
Basically, we have to remove an item from ng-repeat. In short, we have to eliminate an element from the ng-repeat directive and in our case, our HTML element is selected table row TR. These are the standard functions to have a table with data and having crud operations over it .i.e insert, update, delete function.
Let's head toward and learn how to remove a table row in AngularJS.
Steps to delete table row in AngularJS
- Setup: Download and import AngularJS file.
- HTML Markup: Add HTML table with dummy data and a delete button.
- AngularJs: Code to delete selected table row on button click.
# Setup: Download and import AngularJS file.You can download AngularJS files from angularjs.org, or you can use google-hosted files. After importing the Angularjs file, add Directive ng-app & ng-controller to the body tag.
So now our HTML markup looks like as shown below
# 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. Note inside the Action column, we have our Delete Button which deletes the selected table row.
Using the ng-repeat directive, we bind data to our HTML table.
Now on the delete button, we added directive ng-click, and with deleteRow() function, the selected row gets deleted. So our HTML markup looks like as written below.
#AngularJs: Code to delete table row on button click.Here on click of delete button our deleteRow() function gets fire and using splice we remove the selected rows.
Conclusion: Directive ng-repeat is used to Bind data to our HTML table. Directive ng-click is applied on the Delete button which fires deleteRow() function. And with splice remove the selected row. Hence we able to delete table row on a button click.