Question

我有一张桌子，我使用AngularJS来显示它，有一个清除按钮，如果点击，所有行都将从表格中删除。我正在使用splice来做这个，但是当我尝试拼接它时，只有第1行和第3行会拼接。

如何拼接所有行？

self.row.length = 3;
for (var index=0; index < self.row.length; index++) {
    if (self.row[index].DDelDetailId != 0) {
        self.deletedRow.push(angular.copy(self.row[index]));
    }
    console.log("index: "+index+" Rows: "+self.row.length)
    self.row.splice(index, 1)
}

我已经看过所有类似的问题，但没有一个能帮助我。如果self.row.length为1，它可以拼接，但如果它大于1，则会留下1行。

以下是控制台日志中打印的内容：

Index: 0 Rows: 3
Index: 1 Rows: 2

我将所有已删除的行推送到self.deletedRow，然后如果用户单击“保存”，则删除的行将在数据库中删除。每行都有一个删除按钮，因此用户可以删除所有行或删除1个特定行。

Answer 1

当您在删除行时向前移动索引时，您正在跳过行：迭代1：

index = 0
arr: [0, 1, 2]
arr.splice(0, 1) => arr: [1, 2] // deletes first item

迭代2：

index = 1
arr: [1, 2]
arr.splice(1, 1) => arr: [1] // deletes second item

迭代3：

index = 2
arr: [1]
arr.splice(2, 1) => arr [1] // tries to delete third item

如果您一直删除第一个项目，则不会跳过任何内容：

arr.splice(0, 1)

删除所有行也更有效：arr = []或arr.length = 0，

Answer 2

如果点击，所有行都将从表中删除

为什么你在每行都使用splice来清除整个数组。因此，请使用self.row=[]而不是splice()。

根据下面的评论：我实际上将所有已删除的行推送到self.deletedRow，然后如果用户单击“保存”，则删除行

在删除所有行之前，

将行值分配给self.deletedRow。

self.deleteAll=function()
{
self.deletedRow = self.row;
self.row = [];
}

这是所有行的上述方式

以及以下所选行的方式

self.deleteSingleRow = function(currentObject)// currentObject is `ng-repeat` directive object and you should be pass to the `deleteSingleRow` in html  
{
self.deletedRow.push(currentObject);
//do your delete service call and rebind the `row` array
}

Answer 3

你可以使用拼接本身来实现这个目标

以下是整个要求的工作示例

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script>
    (function() {
      var app = angular.module("myApp", []);
      app.controller('testCtrl', function($scope) {
        var self = this;
        self.data = [{"Product":"Body Spray","Location":"USA","Dec-2017":"234","Jan-18":"789","Feb-18":"234","Mar-18":"789","Apr-18":"234"},{"Product":"Groceries","Location":"USA","Dec-2017":"234","Jan-18":"789","Feb-18":"234","Mar-18":"789","Apr-18":"234"},{"Product":"Ready Cook","Location":"USA","Dec-2017":"234","Jan-18":"789","Feb-18":"234","Mar-18":"789","Apr-18":"234"},{"Product":"Vegetables","Location":"USA","Dec-2017":"234","Jan-18":"789","Feb-18":"234","Mar-18":"789","Apr-18":"234"}];
        self.deletedData = [];
        self.duplicateData = angular.copy(self.data);
        self.clearData = function(element){
          if(element){
            var index = self.data.indexOf(element);
            if(index > -1){
              self.deletedData.push(angular.copy(element));
              self.data.splice(index, 1);     
            }
          }
          else{
            self.deletedData = angular.copy(self.data);
            self.data.splice(0, self.data.length);
          }
        };
        
        self.resetData = function(element){
          //The table order wont change
          self.data = angular.copy(self.duplicateData);
          
          //The table order will change in this
          /*angular.forEach(self.deletedData, function (item, index) {
              self.data.push(item);
          });*/
          
          self.deletedData = [];
        };
      });
    }());
  </script>
</head>

<body ng-controller="testCtrl as ctrl">
  <button ng-click="ctrl.clearData()">Delete All</button>
  <button ng-click="ctrl.resetData()">Reset All</button>
  <table class="table">
    <thead>
      <tr>
        <th data-ng-repeat="(key, val) in ctrl.data[0] as header">
          {{ key }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr data-ng-repeat="row in ctrl.data track by $index">
        <td data-ng-repeat="(key, val) in ctrl.data[0]">
          {{ row[key] }}
        </td>
        <td>
          <button ng-click="ctrl.clearData(row)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Answer 4

这是因为self.row.length在拼接时会动态变化。使用临时变量和存储数组的长度来删除所有行 e.g

var temp = self.row.length;
for(var index=0;index<temp;index++) {
  //splice
}

如何拼接AngularJS中的所有项目

4 个答案: