Dada una tabla HTML y la tarea es eliminar/eliminar la fila de la tabla con la ayuda de AngularJS.
Enfoque: el enfoque es eliminar la fila de la array donde se almacenó y sirvió a los datos de la tabla. Cuando el usuario hace clic en el botón cerca de la fila de la tabla, pasa el índice de esa tabla y ese índice se usa para eliminar la entrada de la array con la ayuda del método splice().
Ejemplo 1: este ejemplo contiene una sola columna, cada fila se puede eliminar haciendo clic junto a ella.
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller",
function ($scope) {
$scope.rows = ['row-1',
'row-2',
'row-3',
'row-4',
'row-5',
'row-6'];
$scope.remThis =
function (index, content) {
if (index != -1) {
$scope.rows.splice(index, 1);
}
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
How to remove a row from
the table in AngularJS
</p>
<div ng-app="app">
<div ng-controller="controller">
<table style="border: 1px solid black;
margin: 0 auto;">
<tr>
<th>Col-1</th>
</tr>
<tr ng-repeat="val in rows">
<td>{{val}}</td>
<td><a href="#" ng-click=
"remThis($index, content)">
click here
</a>
</td>
</tr>
</table><br>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo contiene tres columnas , cada fila se puede eliminar haciendo clic junto a ella.
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller",
function ($scope) {
$scope.rows = [{
'ff': '11', 'fs': '12',
'ft': '13'
}, {
'ff': '21',
'fs': '22', 'ft': '23'
},
{ 'ff': '31', 'fs': '32', 'ft': '33' },
{ 'ff': '41', 'fs': '42', 'ft': '43' }];
$scope.c = 2;
$scope.remThis =
function (index, content) {
if (index != -1) {
$scope.rows.splice(index, 1);
}
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
How to remove a row from
the table in AngularJS
</p>
<div ng-app="app">
<div ng-controller="controller">
<table style=
"border: 1px solid black;
margin: 0 auto;">
<tr>
<th>Col-1</th>
<th>Col-2</th>
<th>Col-3</th>
</tr>
<tr ng-repeat="val in rows">
<td>{{val.ff}}</td>
<td>{{val.fs}}</td>
<td>{{val.ft}}</td>
<td><a href="#" ng-click=
"remThis($index, content)">
click here</a>
</td>
</tr>
</table><br>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA