如何在 Angular 中使用拼接从列表中删除项目

How to use splice in Angular to remove an item from a list?

本文关键字：拼接 列表 删除项目 Angular      更新时间：2023-09-26

模板如下所示：

<tr ng-repeat="revision in revisions" id="revision_{{revision.id}}">
    <td><a href="#/wiki/revision/{{ revision.id }}">{{ revision.title }}</a></td>
    <td>(<a href="#/wiki/revision/edit/{{ revision.id }}">Edit</a> | </td>
    <td><a ng-click="revisionDisappear($index)">Delete</a>)</td>
</tr>

控制器是这样的：

$scope.revisionDisappear = function($index) {
    $scope.revision.revisions[0].splice($index, 1);
};

我得到的错误是：Cannot read property 'revisions' of undefined所以我认为问题出在控制器的某个地方。你们谁能告诉我正确的方法是什么？

从您的ng-repeat函数来看，您的作用域包含revisions数组，ng-repeat遍历它们并创建隔离作用域，其中包含一个表示revisions中每个项目的修订变量。

看起来您的控制器在 ng-repeat 之外，因此它看不到包含单个revision实例的作用域，但它确实看到了原始revisions数组，因此您应该能够直接splice它。

 $scope.revisions.splice($index, 1)
您可能

还想检查商品的 ID...

向

系统报告已进行更改也是明智的 - 这是迈向事件驱动架构的第一步。

在这种情况下，您的代码可能如下所示：

.HTML：

<td><a ng-click="revisionDisappear(revision)">Delete</a>)</td>

.JS：

$scope.revisionDisappear = function(revision) {
    for(var i = 0, len = $scope.revisions.length; i < len; i++){
        if($scope.revisions[i].id === revision.id){
            var removed = $scope.revisions[i].splice(i, 1);  // returns an array
            $scope.$emit('myRevisionModule://removed/revision', removed[0]);
            break; // !!!
        }
    }
};
在

循环内部调用数组splice后break;至关重要。也就是说，如果您删除nth项，您的循环将继续到下一次迭代 - 但是，这最后一项已被删除，因此引用 undefined 的属性会引发Type Error。

希望这有帮助！

相关文章：