angularjs ng-repeater 动态删除数据答案

【问题标题】：angularjs ng-repeater dynamically delete dataangularjs ng-repeater 动态删除数据
【发布时间】：2017-01-13 06:02:19
【问题描述】：

我有一种情况，用户添加了示例数据，如图所示。如何添加仅删除特定样本的删除按钮。从图中，我希望“删除样本 1”仅删除样本 1 记录。

谢谢

单击“添加示例”按钮时触发的代码

$scope.addSample = function () {

    $scope.partdetails = [
  {
      "sampleseq": 0,
      "sampleid": 1,
      "attribute": "Height",
      "measureunit": "Centimeter",
      "actualvalue": null,
      "lowerspec": 1.23,
      "upperspec": 3.23,
      "notes": null
  },
  {
      "sampleseq": 0,
      "sampleid": 2,
      "attribute": "Diameter",
      "measureunit": "Inches",
      "actualvalue": null,
      "lowerspec": 1.23,
      "upperspec": 3.23,
      "notes": null
  }
    ];

    $scope.partdetails[0].sampleseq = $scope.sampleCount;
    $scope.partdetails[1].sampleseq = $scope.sampleCount;

    $scope.partdetailsList.push($scope.partdetails[0]);
    $scope.partdetailsList.push($scope.partdetails[1]);

    $scope.sampleCount += 1;
}

【问题讨论】：

请提供数据结构示例和视图的 HTML。
您想在表格的行或顶部添加删除按钮？另外，当用户单击 delete-1 时，您想删除所有 id 为 1 的样本吗？那是对的吗？基本示例在这里jsfiddle.net/crrypdLj/1
当我说 sample 1 时，这意味着前 2 行。只有这些行需要删除，因为它们属于样本 1 。不是所有的行。不幸的是，jsfiddle 链接一次删除了一行。
按钮在哪里？在行中还是在顶部？这是单行和多行的更新示例jsfiddle.net/crrypdLj/2
感谢您为我提供的帮助。我能够使用此链接解决问题。 coderwall.com/p/fnp2oq/…

标签： angularjs angularjs-ng-repeat angular-ui-bootstrap

【解决方案1】：

这个链接有解决办法只是修改列表accordinlgy

https://coderwall.com/p/fnp2oq/use-ng-repeat-on-tbody-to-create-summary-rows-for-nested-data

【讨论】：

【解决方案2】：

您可以使用Array.prototype.filter 获取新的数据记录，其中不包含未通过谓词函数的项目

假设您的删除按钮调用了一个名为 deleteSample 的函数并传递给它一个示例 ID：

HTML：

... ng-repeat="row in records" ...

<button ng-click="deleteSample(row.sampleid)">Delete sample</button>

控制器：

$scope.deleteSample = function(sampleId) {
    $scope.records = $scope.records.filter((row)=> {
        return !angular.equals(sampleId, row.sampleid)
    });
}

当然，这并不能解决您可能还需要删除数据库中的行的问题。

【讨论】：