Angular Dynamically Delete Row from Table

Angular Dynamically Delete Row from Table

Today, We want to share with you Angular Dynamically Delete Row from Table.
In this post we will show you Angularjs Dynamically Delete Row from Table | Angular Table, hear for Add/Remove rows and columns with AngularJS we will give you demo and example for implement.
In this post, we will learn about AngularJS – Adding/Removing Table Rows Dynamically with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.angularjs dynamically delete row from table

READ :  Flowroute SMS API using Yii 1 with PHP

The ng-click directive is used in each particular row select.

The ng-click directive invokes the method delete or removeRow or splice whose code is represented below.

Example 1 : delete Table Row Dynamically with Example

<td><input type="button" value="Remove" data-ng-click="removeItemRow($index)"/></td>
$scope.removeItemRow = function (indexval) {
  $scope.studentList.splice(indexval, 1);
};

Example 2 : Removing a Table Row Dynamically using Angularjs

<html>
<head>
    <title>delete a table row dynamically in angular example</title>
<img src="data:image/gif;" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />

	<img src="data:image/gif;base64," data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
	<hr/>

<h1>Solution of AngularJs All Problems For infinityknow.com</h1>

<h3>
	<a href="https://infinityknow.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of infinityknow.com </a>
	</h3>
</body>
</body>
</html>

Example 3 : Remove rows and columns with AngularJS

$scope.removedata = function(objname)
{
// console.log('data from remove'+objname);
//console.log('before'+$scope.salesorderlist);
// $scope.salesorderlist.splice(objname, objname);

console.log('end'+$scope.salesorderlist);

if(objname != -1) {
$scope.salesorderlist.splice(objname, 1);
}
}

Example 4 : Remove whole table data row angularjs click button

<table class="table first-data table-bordered focus table-hover">
<tr class="odd">
<th>Show or Hide </th>
<th>Sales</th>
<th>Sales Code</th>
<th>Sales Avaiable Date</th>
<th>Sales Price</th>
    </tr>
<tr class="evan" data-ng-repeat="(salesIndex, sales) in salesorderlist">
<td><input type="button" value="click here to hide" class="btn btn-primary" data-ng-click="removesalesdataRow(salesIndex)"/></td>
<td>{{sales.salesName}}</td>
<td>{{sales.salesitemCode}}</td>
<td>{{sales.salesreleaseDate}}</td>
<td>{{sales.salesprice | currency}}</td>
    </tr>
</table>

$scope.removesalesdataRow = function (salesIndex) {
    $scope.salesorderlist.splice(salesIndex, 1);
}

Add a Comment

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