在AngularJS中删除多行表格

Question

我在 angularjs 表中添加了每一行的复选框，并在表外添加了一个通用的删除按钮，这样就可以一次选择和删除多行。选择行并单击删除时，将删除该特定行。这很好，直到这里它也在下面的 plunker 中工作。 Now what I need is when a particular row is selected, its rowid has to be sent as a parameter to another URL.当这个带有 ids 的 URL（由选定的 rowIds 形成的 URL）被调用时，会自动从第一个 URL 数据中删除行，现在必须从第一个 URL 更新表。 null 将从第二个 url 以 ids 作为参数返回，同时将从第一个 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. 当从表中的一行中选中一个复选框并单击删除按钮时，该 rowid 必须发送到第二个 URL（需要调用另一个 url，不需要发布），并且这个 url 当与选定的 rowids 一起调用时会删除来自第一个 url 的特定行详细信息并返回 null。
3. 最后，第一个 url 数据（将通过调用带有 rowids 的第二个 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;
        });

现在在删除函数中，您可以创建一个检查的行数组并将它们发送到 URL..Like:

  $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);
        }

    }