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

【问题标题】：How to use splice in Angular to remove an item from a list?如何在 Angular 中使用拼接从列表中删除项目？
【发布时间】：2013-11-05 07:09:44
【问题描述】：

模板如下所示：

<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 所以我认为问题出在控制器的某个地方。谁能告诉我正确的做法是什么？

【问题讨论】：

请更详细地更新这个问题，并可能是一个有效的 plunkr 示例

标签： javascript arrays function angularjs loops

【解决方案1】：

根据您的ng-repeat 函数判断，您的作用域包含revisions 数组，ng-repeat 对它们进行迭代并创建隔离作用域，其修订变量代表revisions 中的每个项目。

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

 $scope.revisions.splice($index, 1)

【讨论】：

这给了我TypeError: Cannot call method 'splice' of undefined
你能创建一个 plunker/jsfiddle 来显示你的问题吗？问题肯定在于控制器中的范围可见性，很大程度上取决于控制器的使用位置与 ng-repeat 指令
plunker 不起作用，因为您将服务注入到未在 plunker 中定义的控制器中，但是我可以看到跨不相关控制器的范围模型的交叉授粉。一个通用的解决方案是，如果您需要在控制器之间共享数据，则需要使用服务。更具体的答案需要您在问题中提供更多细节并提供问题的工作示例

【解决方案2】：

您可能还想检查商品的 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。

希望这会有所帮助！

【讨论】：