删除AngularJS中的多行表

Question

我在angularjs表的每一行都添加了复选框，并在表外添加了一个常见的删除按钮，这样一次可以选择和删除多行。当选择行并单击"删除"时，该特定行将被删除。这很好，直到现在它还在下面的plunker中工作。现在我需要的是，当选择一个特定的行时，它的rowid必须作为参数发送到另一个URL。当调用这个带有id的URL(由选定的rowId组成的URL)时，这些行将自动从第一个URL数据中删除，现在必须从第一个URL更新表。null将从第二个url返回，ID作为参数，同时从第一个url的JSON数据中删除行。

以下是demo：http://plnkr.co/edit/UzKdIGSubEfHoF7FHoCd?p=preview

下面是表格的代码：

<div ng-controller="SampleController">   
<form class="form-horizontal">
<a class="btn btn-info" ng-click="subt_click()">Submit</a>
</form>    
<div class="table-responsive" ng-show="tableData.length > 0"> 
<table class="table table-striped table-bordered table-hover dataTables-example"> 
<thead> 
<tr> 
<th><input name="all" type="checkbox" ng-click="selectAllFriends()" /></th>
<th>ID</th> 
<th>Body</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="x in tableData"> 
<td><input name="all" type="checkbox" ng-model="x.checked" /></td>
<td>{{x.id}}</td> 
<td>{{x.body}}</td> 
</tr> 
</tbody> 
</table>        
</div>  
<input ng-hide="!tableData.length" type="button" class="btn btn-danger pull-left" ng-click="remove()" value="Remove">

app.js:

$scope.remove = function () {
var newDataList = [];
$scope.selectedAll = false;
angular.forEach($scope.tableData, function (checked) {
if (!checked.checked) {
newDataList.push(checked);
}
});
$scope.tableData = newDataList;
};
$scope.isAll = false;
$scope.selectAllFriends = function () {
if ($scope.isAll === false) {
angular.forEach($scope.tableData, function (x) {
x.checked = true;
});
$scope.isAll = true;
} else {
angular.forEach($scope.tableData, function (x) {
x.checked = false;
});
$scope.isAll = false;
}
};

简而言之，我需要的是：

1. 我从第一个url获取表数据。(请检查plunk，我使用的url是jsonplaceholder.typicode.com/posts)
2. 当从表中的一行中选中复选框并单击"删除"按钮时，该行ID必须发送到第二个URL(需要调用另一个URL，不需要发布)，当与所选行ID一起调用时，该URL将从第一个URL中删除该特定行的详细信息并返回null
3. 最后，第一个url数据(将通过使用rowid调用第二个url来修改)必须在现有的表中更新

如何更改此代码以将rowid发送到第二个url并调用该url来更新表。提前感谢！！

Answer 1

$scope.xListNo在您的语句中永远不会受到影响。你可能想使用xListNo，这是你的函数参数(没有$scope)吗？第二个语句中的index也是如此，应该是idx。

仔细检查变量的拼写，它应该可以工作！

Answer 2

@Deborah：浏览了您的Plunker，找不到任何将ID发布到URL的代码。假设您在某个地方这样做，仍然可能有两种情况，是在进行调用时立即删除数据，还是在API调用响应后删除数据。更好的方法是在API成功之后移除。

因此，您应该做的可能是将整个表数据保存在一个变量中(正如您已经做过的那样，在GET调用之后)。

//Table Data
$http.get("http://jsonplaceholder.typicode.com/posts")
.success( function(response) {
$scope.tableData = response;
});

现在，在remove函数中，您可以创建一个经过检查的行数组，并将其发送到URL。。类似：

$scope.remove = function(){
$scope.deletedIds = [];
$scope.tableData.forEach(function(x){
if(x.checked){
$scope.deletedIds.push(x)
}
}
makePostCallFOrDeletion()
}
//use this if POST call
function makePostCallFOrDeletion(){
$http.post("deleteurl", angular.toJson($scope.deleteIds)).then(function(response){
$scope.tableData = response //assuming you get the updated JSON back.
//if you don't get JSON back, delete yourself from JSON, like
$scope.tableData.forEach(function(x,i){
if ($scope.deleteIds.indexOf(x.id) !== -1)
$scope.tableData.splice(i, 1);
}
}

根据我对你问题的理解，这应该会让你继续前进。。

编辑：OP希望GET调用删除(根据我的意见，这不是一个好主意，因为ID的数量可能太大)

//use this if GET call
function makePostCallFOrDeletion(){
$http.get("deleteurl" + append IDs here,).then(function(response){
//$scope.tableData = response //assuming you get the updated JSON back.
//if you don't get JSON back, delete yourself from JSON, like
$scope.tableData.forEach(function(x,i){
if ($scope.deleteIds.indexOf(x.id) !== -1)
$scope.tableData.splice(i, 1);
}
}