极客教程如何使用AngularJS从表中删除一个行
给出一个HTML表格，任务是在AngularJS的帮助下从表格中移除/删除该行。
方法：方法是将行从其存储的数组中删除，并提供给表数据。当用户点击靠近表格行的按钮时，就会传递该表格的索引，该索引被用来在splice()方法的帮助下从数组中删除该条目。
例子1：这个例子包含一个单列，每一行都可以通过点击它旁边来删除。
<!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>
输出:
例子2：这个例子包含三列，每一行都可以通过点击它旁边来删除。
<!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>
输出:
