Удалить несколько строк таблицы в AngularJS

Question

У меня есть таблица углов с добавлением флажков к каждой строке и общей кнопкой удаления за пределами таблицы, так что сразу можно выбирать и удалять несколько строк. Когда будут выбраны строки и удалены, эти конкретные строки будут удалены. Это нормально, и до сих пор он работает в нижнем плунжере. Теперь мне нужно, когда выбрана определенная строка, ее rowid должен быть отправлен как параметр в другой URL. когда вызывается этот URL (URL, образованный выбранными rowIds) с идентификаторами, автоматически строки будут удалены из первых URL-данных, и теперь таблица должна быть обновлена ​​с первого URL-адреса. null будет возвращен из второго URL с идентификаторами в качестве параметров и в то же время, что строки будут удалены из данных JSON по первому URL.

Вот 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-адреса. (PLS проверить plunk и url я использовал jsonplaceholder.typicode.com/posts)
2. Когда флажок выбран из строки в таблице и нажата кнопка удаления, этот rowid должен быть отправлен на второй URL (необходимо вызвать другой URL-адрес, не нужно публиковать), и этот URL-адрес при вызове вместе с выбранными rowids удаляет эту конкретную информацию о строках из первого URL-адреса и возвращает нуль.
3. Наконец, первые данные URL-адреса (которые будут изменены путем вызова второго URL-адреса с помощью rowid) должны быть обновлены в уже присутствующей таблице.

Как изменить этот код, чтобы отправить rowid во второй URL-адрес и вызвать этот URL-адрес для обновления таблицы. Заранее спасибо!!

Answer 1

$scope.xListNo не влияет на ваши заявления. Возможно, вы хотели использовать xListNo, который является вашим параметром функции (без $scope)? Так делает index в вашем втором заявлении, которое должно быть idx.

Двойная проверка правильности ваших переменных и она должна работать!

Answer 2

@Deborah: Прошел через ваш Plunker и не смог найти код для отправки идентификаторов по 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); 
     } 

    } 

согласно моему пониманию вашего вопроса, то это должно вас происходит ..

EDIT: OP хотел ПОЛУЧИТЬ требуют удаления (которые, как по моему мнению, не является хорошей идеей, так как количество идентификаторов может быть слишком большим)

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

    }