如何拼接AngularJS中的所有项目答案

【问题标题】：How to splice all the items in AngularJS如何拼接AngularJS中的所有项目
【发布时间】：2021-03-01 14:56:17
【问题描述】：

我有一个表格，我正在使用 AngularJS 来显示它，有一个清除按钮，如果单击该按钮，所有行将从表格中删除。我正在使用拼接来执行此操作，但是当我尝试拼接时，只有第一行和第三行得到拼接。

如何拼接所有行？

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 个特定行。

【问题讨论】：

标签： javascript angularjs

【解决方案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，

【讨论】：

这对我帮助最大，因为它解释了为什么它会跳过行，几乎所有答案都是正确的。谢谢大家。

【解决方案2】：

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

为什么你对每一行都使用拼接，你可以清除整个数组。所以使用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
}

【讨论】：

我实际上将所有已删除的行推送到self.deletedRow，然后如果用户单击保存，那么删除的行将在数据库中被删除。每行都有一个删除按钮，因此用户可以删除所有行或删除 1 个特定行。
@klent 现在我已经解释了你想要的简单逻辑。

【解决方案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>

【讨论】：

【解决方案4】：

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

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

【讨论】：