如何通过单击相应的删除按钮删除包含文本框的表的行 [英] how to remove the row of the table containing textbox by clicking the respective remove button
问题描述
我有一个添加按钮，用于添加包含texbox的行.但是我想通过单击相应的删除按钮来删除表的行.查看页面代码是这样的:
I have an add button which adds the row containing texbox. However I want to remove the row of the table by clicking the respective remove button. The view page code is like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>showintable</title>
<script src="~/scripts/jquery-3.1.1.min.js"></script>
<script src="~/scripts/angular.min.js"></script>
<script src="~/scripts/angular-messages.min.js"></script>
<script src="~/app/controller/checkCtrl.js"></script>
<script src="~/app/filter/filterrange.js"></script>
</head>
<body ng-app="app">
<div ng-controller="sayCtrl">
<table border="1">
<tr>
<th>S. No.</th>
<th>Textbox1</th>
<th>Texbox2</th>
</tr>
<tr ng-repeat="v in [] | range:tellrange">
<td>{{$index+1}}</td>
<td><input type="text" ng-model="Namemodel[$index]" /></td>
<td><input type="text" ng-model="Addressmodel[$index]" /></td>
<td><input type="button" ng-click="subtractrow()" value="Remove" /></td>
</tr>
<tr><td align="right" colspan="4"><input ng-click="addrow()" type="button" value="Add" /></td></tr>
</table>
</div>
</body>
</html>
angularjs的控制器checkCtrl.js像这样:
The controller checkCtrl.js of angularjs is like this:
angular.module('app', ['ngMessages']).controller('sayCtrl', SayController);
SayController.$inject = ['$scope', '$http'];
function SayController($scope, $http) {
$scope.Namemodel = [];
$scope.Addressmodel = [];
$scope.tellrange = 1;
$scope.addrow = function () {
$scope.tellrange = $scope.tellrange + 1;
};
$scope.subtractrow = function () {
};
}
angularjs的过滤器filterrange.js像这样:
The filter filterrange.js of angularjs is like this:
angular.module('app').filter('range', function () {
return function (input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++) {
input.push(i);
}
return input;
};
});
页面看起来像这样:
https://drive.google.com/open?id=0B8ZNi-QTxOOYUjNqcnlraDVydVE
我已经搜索过，但无法获得相关答案.任何帮助表示赞赏.在此先谢谢..............
I have searched for it but I could not get the relevant answer. Any help is appreciated. Thanks in advance..............
推荐答案
首先，使其更容易遍历行.您需要N行，并且每行应具有两条信息:名称和地址.
First, make it easier to iterate through the rows. You want N rows, and each row should have two pieces of information: a name and an address.
所以不要使用两个数组.使用行的一个数组，其中每行都有一个名称和地址:
So don't use two arrays. Use one array, of rows, where each row has a name and an address:
$scope.rows = [
{
name: 'name 1',
address: 'address 1'
},
{
name: 'name 2',
address: 'address 2'
}
];
要添加一行，您只需要
$scope.rows.push({
name: '',
address: ''
});
要遍历各行，您所需要做的只是
To iterate on the rows, all you need is
<tr ng-repeat="row in rows">
<td>{{$index+1}}</td>
<td><input type="text" ng-model="row.name" /></td>
<td><input type="text" ng-model="row.address" /></td>
<td><input type="button" ng-click="removeRow(row)" value="Remove" /></td>
</tr>
如您所见，您需要在removeRow函数中传递什么行以将其删除.
As you see, you need to pass what row to remove in your removeRow function.
要删除该行，您所需要做的就是在$ scope.rows中找到其索引，然后删除该索引:
And to remove the row, all you need is to find its index in $scope.rows, and remove that index:
$scope.removeRow = function(row) {
var index = $scope.rows.indexOf(row);
$scope.rows.splice(index, 1);
}
我不知道每一行应该代表什么.例如，我想可能是用户，所以可以随意将行重命名为用户，然后将行重命名为user.命名事物并拥有一个好的，正确的模型是关键.您的页面显示一个用户表.不是两个名称和地址表.
I don't know exactly what each row is supposed to represent. I guess it might be a user, for example, so feel free to rename rows to users, and row to user. Naming things, and having a good, correct model, is the key. Your page displays a table of users. Not two tables of names and addresses.
这篇关于如何通过单击相应的删除按钮删除包含文本框的表的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
