且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何通过单击相应的删除按钮删除包含文本框的表的行

更新时间:2023-12-04 12:09:22

首先,使其更容易遍历行.您需要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.