Question

我将angularjs表添加了每行的复选框和表外的常用删除按钮，以便一次可以选择和删除多行。选择行并单击删除时，将删除该特定行。这很好，直到这里它也在下面的plunker工作。现在我需要的是当选择一个特定的行时，它的rowid必须作为参数发送到另一个URL。当调用带有ids的URL（由选定的rowIds形成的URL）时，将自动从第一个URL数据中删除行，现在必须从第一个URL更新表。将使用ID作为参数从第二个网址返回null，同时将从第一个网址的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;
    }
};

简而言之，我需要的是：

我从第一个网址获取表格数据。（请检查插件，我使用的网址是jsonplaceholder.typicode.com/posts）
当从表格中的行中选择一个复选框并单击删除按钮时，必须将该rowid发送到第二个URL（需要调用另一个URL，无需发布），并且当与所选rowid一起调用时，此url将删除该来自第一个url的特定行详细信息并返回null。
最后，第一个网址数据（仅通过调用带有rowid的第二个网址进行修改）必须在已存在的表格中进行更新。

如何更改此代码以将rowid发送到第二个网址并调用该网址来更新表格。在此先感谢!!

Answer 1

$scope.xListNo在您的陈述中永远不会受到影响。可能您想使用xListNo这是您的函数参数（没有$scope）？第二个陈述中的index也应该是idx。

仔细检查您的变量拼写，它应该有效！

Answer 2

@Deborah：找不到您的Plunker，找不到任何将ID发布到网址的代码。假设您正在某处执行此操作，仍然可能存在两种情况，即是在调用后立即删除数据还是在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);
        }

    }

在AngularJS中删除多行Table

2 个答案: