Javascript 如何过滤或除去数组中的空对象？AngularJS，火力基地

我的应用程序是使用AngularJS、Yeoman stack构建的，连接到Firebase、AngularFire数据库。在我的应用程序中，我尝试上传和删除图片，如下所示

它工作正常，除了当我删除其他图像之间的任何img时，它实际上并没有删除img，而是将其替换为宽度和高度为0的img。。。或者看起来（更多信息在底部）

如果我删除了另一个“in bewteen”img，我会做同样的交易

只有当我删除最外层的img时，页面才会真正删除img

^^请注意，最上面一行的两个其他图像之间的图像没有删除，因为它是通过其他img对象水平包围的。我必须删除firebase.remove底部的两个img，在我第一次删除的img的右边，然后才删除整个底部的一行

我不知道为什么我会遇到这个错误，有人能给我一些反馈吗

这是控制器中的deleteImg和updateImg函数

angular.module('myApp').controller('MainCtrl', ['$scope', '$firebase', '$filter', function($scope, $firebase, $filter) {
$scope.deleteImg = function(img) {
    if (confirm('Are you sure you want to delete the img?') === true) {
        var deletingID = img.id; 
        var deletingLink = fireRef + "/" + img.id;
        var deleteRef = new Firebase(deletingLink);
        deleteRef.remove();
        $(".delete").remove();
        location.reload();
    }
};

$scope.updateImg = function(Img) {
    if (confirm('Are you sure you want to update the Img?') === true) {
        var updatingID = $scope.selectedImg.id; 
        var updatingLink = fireRef + "/" + $scope.selectedImg.id;
        var updateRef = new Firebase(updatingLink);

        var dataObject = {
            "name" : $scope.selectedImg.name, "description": $scope.selectedImg.description, "type": $scope.selectedImg.type ... etc...
        };
        updateRef.set(dataObject);
        location.reload();
    }
};
}]);

下面是我如何实例化我的数组和Firebase数据库以及创建新的$scope.selectedImg。我目前正在从firebase数据库获取数据，并实例化一组Img对象。我在应用程序中将阵列用作我的img模型

var fireRef = new Firebase('MY_FIREBASE_URL');

$scope.imgs = []; //<<< instantiate a new array

var imgNum = 0;
var toArrayFirebaseLink = fireRef + '/' + imgNum;

fireRef.once('value', function(allSnapshot) {
    allSnapshot.forEach(function(imgSnapshot) {
        var i = imgSnapshot.child('id').val();
        if( i !== null ){
            // set databaseSnapshot to our img array
            $scope.imgs[i] = imgSnapshot.val();
        }
   });
});

$scope.instantiateImg = function(object) {
    $scope.selectedImg = {};
    // $scope.selectedImg.name = "";
    $scope.selectedImg.etc = "";
    $scope.selectedImg.etc = "";
};

//Created selectedImg with data retrieved from database to be used within the views.
$scope.selectImg = function(object) {
    $scope.selectedImg = object;
};

---

下一次我肯定会使用服务/对象样式，但对于这个应用程序来说，这非常有用。不管怎么说，解决这个问题很有趣：）谢谢大家的帮助@Kato和@m.e.conroy

不确定什么是Firebase，但据我所知，您删除了数组中的项，该项变为空。您需要.splice（）$scope.imgs数组要真正从ngRepeat中删除一个项目

您需要为

ng click

创建一个方法，该方法从

ng repeat

中传递

$index

，然后在

ng click

调用的控制器方法中从数组中删除图像（当然，在用户确认后）并将其从数据库中删除。将其从阵列中移除将自动触发

ng repeat

重新渲染

目前您正在使用jQuery从DOM中删除对象，但它仍然存在于角度数组中。Angular不知道您使用jQuery从视图中删除了对象。如果您按照上面所描述的做，您甚至不需要使用jQuery或操作DOM，Angular将为您做这件事。您不必执行

$location.reload

$scope.deleteImg = function(i,id){
    if(confirm('..') === true){
        $scope.imgs.splice(i,1);
        // do firebase deletion
    }
};

在模板中：

<button type="button" class="delete" ng-click="deleteImg($index,img.id)">
    ...
</button>

然后模板就是：

<button type="button" class="delete" ng-click="deleteImg($index)">...

。。。

所以我实现了这个，并认为它工作得很好，特别是因为我删除了

location.reload（）

并且在视图中显示图片被删除了。然而，当我刷新页面时，相同的“ghost”img及其删除按钮再次出现。当我检查scope模型的AngularJS chrome扩展时，它显示最外层的img（位于“中间”ghost img右侧的img）正在接管删除的图像，这意味着删除的图像与最外层img对象的名称、id和其他属性相同。这很奇怪，因为在我的Firebase仪表板中，它显示img确实被删除了，但直到最外层的img被删除后，它才反映在我的视图中。我一直在角度上使用splice来做你想做的事情。我能想到的唯一一件事是，当您将图像数组设置为重新加载时，Firebase加载肯定会发生一些奇怪的事情。我对Firebase不太熟悉，所以我无法与可能的缓存或其他可能的问题源交谈。如果在重新加载时出现这种情况，您肯定应该看看您是如何设置阵列的。谢谢您的回复m.e.conroy。如果您查看上面我在问题上发布的代码，我将使用firebase ref的快照设置数组，例如

fireRef.once（'value'，function（allSnapshot）{…}）

。我这样做的原因是，如果不将firebase引用中的数据作为上面和这里引用的快照（），我就无法使用它。我首先检查它是否能够读取对象的属性，特别是使用

var I=imgSnapshot.child（'id'）.val（）；如果（i！==null）{…}

，然后在该索引处将整个对象设置到我的数组中。你通常如何设置你的数组？哦，这是一个特别讨厌的问题。我不会胡闹重置ID，这只会导致其他问题——特别是当您的应用程序一次由多个客户机运行时。如果可能的话，我会尝试使用对象，不确定您是否能够在这一点上切换。Javascript对象与关联数组“类似”。实际上，您甚至可以使用索引a-la obj[0]或obj[5]引用对象属性。在路径中设置字符串键可能会有所帮助。例如，如果将“root”添加到集合的数据中，并在客户端忽略该键，则数据将被视为对象，所有空键都将消失。这是一种廉价的解决方法，但也是一种禁用类似数组的行为并将键视为对象的方法。实际上，您可能只想使用push ID并去掉数组键，因为在这个用例中，这只会导致问题。@Kato感谢您的回复。那么，你是说我应该使用“ref.push（data）”时它给对象的随机名称，通常类似于“Jwkmsjkd”并将其用作引用？我是firebase的新手，所以我不确定如何调用和使用这些对象，以及如何分配唯一的ID等等。是的，我认为这是最好的。还有，它提供了内置的阵列支持。@Kato我一定会查看引用。我不知道你是否记得，但我们在这里进行了类似的讨论（）关于为什么我使用AngularFire V0.6而不是V0.8，我从来没有完全确定为什么我不能使用0.8版，如果你不介意的话，你能解释一下吗

<button type="button" class="delete" ng-click="deleteImg($index,img.id)">
    ...
</button>

$scope.deleteImg = function(i){
    var _img = $scope.imgs.splice(i,1);
    // use _img.id with your firebase delete statement
};

<button type="button" class="delete" ng-click="deleteImg($index)">...