AngularJs Remove Table Row
AngularJs Remove Table Row – It is very easy to remove/delete the row from table, Unlike jQuery or other framework you don’t need to put much effort to remove the existing row in table. Here in this tutorial we are going to explain how you can remove the table row in AngularJs. You can use our online editor to edit and run the code online.
AngularJs Remove Table Row | Delete Table Row | Example | Demo
It is very simple to remove table row. Here we have create a simple function which will remove the row from the table.
AngularJs Remove Table Row : Delete Table Row Example
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.message = '';
$scope.rows = ['Table Row 1', 'Table Row 2', 'Table Row 3', 'Table Row 4', 'Table Row 5', 'Table Row 6'];
$scope.removeRow = function(index, content) {
if(index != -1){
$scope.rows.splice(index,1);
$scope.message = content+' removed successfully.';
// do other stuffs such as perform ajax request if want to delete data from
//server
}
};
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<span style='color:green;font-weight:bold;'>{{message}}</span>
<table>
<tr><th>Sample Table</th></tr>
<tr ng-repeat="content in rows">
<td>{{content}}</td>
<td><a href="#" ng-click="removeRow($index, content)">Remove</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
|
Now everything is ready just run the above example to see the demo. If you run the above example it will produce the output something like this –
Advertisements
