从范围中删除对象时，它会在 Angularjs 中隐藏其余对象

When deleting object from scope, it hides the rest in Angularjs

本文关键字：对象 隐藏 余对象 Angularjs 删除 范围      更新时间：2023-09-26

我的$scope.clients里有一个客户端列表，我用ng-repeat显示它。

<tr ng-repeat="client in clients">
   <td class="l-h-3x">{{client.name}}</td>
   <td class="l-h-3x p-t-md text-right">
       <button type="button" ng-click="deleteUser($index)>Delete</button>
   </td>
</tr>

现在，如果我删除列表中的最后一个client，它会从我的数据库中删除它并将其从$scope.clients中删除，它可以完美运行。当我删除任何不是最后一个client时，问题就来了。它从我的数据库中删除了正确的client，并将其从我的$scope.clients中删除，但随后它隐藏了下面所有剩余clients。

外汇。 

$scope.clients [
{id: 1, name: 'Adam'},
{id: 2, name: 'Nadja'},
{id: 3, name: 'Marc'},
{id: 4, name: 'Casper'}]

我删除了client，id = 3它像一个魅力一样工作，但是当我删除client时，id = 2，它会从我的数据库中删除它并将其从范围中删除，但也隐藏了id = 3和id = 4的client。

以下是我目前用来删除client的功能 

$http.delete(api.getUrl('user', person_to_delete.id), {
        user: $scope.user
    })
.success(function(data, status, headers, config) {
        $scope.clients.splice(idx, 1);
    })
.error(function(data, status, headers, config) {
    });

在审查了我的问题(在您的输入的帮助下(后，我发现了一些愚蠢的错误(对此感到抱歉(，我现在已经更新了我的帖子，但我仍然有同样的问题。删除client 2 后，它仍然隐藏client 3 和 4

不详细介绍您的代码，请查看此内容我用它建造的小提琴。看起来它做了你期望它做的事情。

<html ng-app="clientsApp">
<head>
    <script src="https://code.angularjs.org/1.3.14/angular.min.js"></script>
    <script>
    var app = angular.module("clientsApp", []);
    app.controller("clientsCtrl", function($scope) {
        $scope.clients = [
        {id: 1, name: 'Adam'},
        {id: 2, name: 'Nadja'},
        {id: 3, name: 'Marc'},
        {id: 4, name: 'Casper'}];
        $scope.deleteUser = function(idx) {
        var person_to_delete = $scope.clients[idx];
            for (var i = $scope.clients.length; i--;) {
                var user = $scope.clients[i];
                if ($scope.clients.indexOf(user) == idx) {
                    $scope.clients.splice(i, 1);
                }
            }
        };
    });
    </script>
</head>
<body ng-controller="clientsCtrl">
    <table>
        <tr ng-repeat="client in clients">
            <td class="l-h-3x">{{client.name}}</td>
            <td class="l-h-3x p-t-md text-right">
                <button type="button" ng-click="deleteUser(clients.indexOf(client))">Delete</button>
            </td>
        </tr>
    </table>
</body>
</html>

不太明白在这里使用for的目的。在第一次splice之后，数组中的索引被移动，这就是为什么索引后的所有项目都被删除的原因。

您可以直接使用splice，因为您知道正确的元素索引。

此外，您还可以使用服务返回$http承诺的强大功能，请参阅以下示例： 

$http.delete(api.getUrl('user', person_to_delete.id), {
    user: $scope.user
})
.success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available 
    $scope.clients.splice(idx, 1);
})
.error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

我认为问题可能出在 for 循环中。

for (var i = $scope.clients.length; i--;) {
    var user = $scope.clients[i];
    if (clients.indexOf(user) == idx) {
        $scope.clients.splice(i, 1);
    }
}

您从 $scope.clients 列表的末尾循环，然后向后移动，将每个 $scope.client 与其他客户端列表中的每个客户端进行比较，试图找到匹配的客户端。

如果你找到一个匹配的，那么你就会问"client"列表中的客户端是否恰好与$scope.clients列表中的客户端在被点击时处于相同的索引位置，最后如果这是真的，那么从列表中拼接它。

为什么这些是必要的？

您已经拥有单击的项的索引位置(来自函数参数(，为什么不直接在拼接调用中使用它？

$scope.clients.splice(idx, 1);
相关文章：