javascript - 如何过滤掉或摆脱数组中的空对象？ AngularJS，火力基地

Question

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



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



如果我删除另一个“in-bewteen”img 相同的交易



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



^^请注意顶行其他两个图像之间的一个没有被删除，因为它被其他 img 对象水平包围。我必须 firebase.remove 底部两个 imgs 到我首先删除的那个的右边，然后才删除整个底行。

我不知道为什么我会得到这个错误，有人可以给我一些反馈吗？

这是我的 Controller 中的 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;
};

这是我的html View

<div class="container">  
 <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 campaign-thumbs" ng-repeat="img in imgs track by $index" ng-animate="'animate'">

<button type="button" class="delete" ng-click="deleteImg(img)">
      <span>&times;</span>
      <span class="sr-only">Delete</span>
</button>

<img ng-click="selectImg(img)" src="{{img.imgSrc}}" class="img-responsive" data-toggle="modal" data-target="#imgModal">
  </div>
</div>

使用 chrome AngularJS 扩展，我发现我使用 firebase remove() 函数在数据库中删除的元素，我的 $scope.imgs 数组在我删除它的空间内仍然有一个“null”元素。见下图



我该如何克服这个错误？

编辑1:
我遵循@m.e.conroy 的建议并添加了拼接功能，并认为它工作得很好，尤其是因为我删除了 location.reload()在 View 中，它显示图片在没有刷新的情况下被删除。但是，当我刷新页面时，相同的“幽灵”imgs 及其删除按钮再次出现。

当我检查范围模型的 AngularJS chrome 扩展时，它显示最外面的 img(位于“中间”ghost imgs 右侧的 img)正在接管已删除的图像，这意味着已删除的图像正在获取设置与最外层 img 对象相同的名称、id 和其他属性。再一次，根据 chrome 扩展，数组元素不会被删除，而只会被替换。一旦我刷新它会回到我之前在数组中的“null”元素遇到的相同问题。这很奇怪，因为在我的 Firebase 仪表板中，它显示 img 确实已被删除，但它不会反射(reflect)在我的 View 中，直到最外面的 img 被删除。下面是我的 Firebase 仪表板和索引的 View 。只有当 img 24 被删除时，更改才会真正应用。



编辑2:
正如@katowulf 在本文 ( https://www.firebase.com/blog/2014-04-28-best-practices-arrays-in-firebase.html) 中所引用的，我遇到了他在“在数组中存储数据的良好用例”部分中描述的确切问题。目前，我正在尝试针对我删除的每一个 img 并将它们的 ID 更改为 id - 1。以及火灾引用中的 imgs 位置 firebar_url/ref - 1但我觉得我正在尝试强制实现而不是找到正确的解决方案。我应该尝试重构我的代码以利用他建议的对象吗？ (我最初尝试过，但我无法获取对象及其属性，因此必须依赖 firebase 快照来实例化和创建我的数组。引用: How would I convert my new Object data I am retrieving from Firebase into the JSON form as I had before)。欢迎任何反馈。

我的解决方案:手动将索引值以及相应的“id”属性更改为-1，以便在已删除的对象之后的所有 img 对象。

$scope.deleteImg = function(index, img) {
    if (confirm('Are you sure you want to delete the Img?') === true) {
        $scope.imgs.splice(index,1); //remove objects in array

        var i; 
        for(i = index; i < $scope.imgs.length; i++) {
            //I want to grab the next img object 
            var previousIndexID = i; //start from the picture right after the one deleted and change its id to id-1
            var newIndexID = i+1;
            var previousIndexLink = fireRef + "/" + previousIndexID;
            var newIndexLink = fireRef + "/" + newIndexID;
            var previousIndexRef = new Firebase(previousIndexLink);
            var newIndexRef = new Firebase(newIndexLink);

            var idIndexLink = fireRef + "/" + previousIndexID + "/id";
            var idIndexRef = new Firebase(idIndexLink);

            console.log(previousIndexRef.toString()); // element[index] that got deleted
            console.log(newIndexRef.toString());      // element[index] next img object

            //copy the next img object into the location of the object that just got removed() 'url/num-1' and 'url/id' value 
            newIndexRef.once('value', function(snap) {
                var i = snap.val();
                previousIndexRef.set(i);
            });
            idIndexRef.once('value', function(snap) {
                var i = snap.val();
                idIndexRef.set(i-1);
            }); 

        };
        // until the length is reached and then I want it to delete the last one
        var lengthID = $scope.imgs.length; 
        var lengthLink = fireRef + "/" + lengthID;
        var lengthRef = new Firebase(lengthLink);
        lengthRef.remove();
    }
};

下次我肯定会使用服务/对象样式，但对于这个应用程序来说，这很好用。无论如何解决它很有趣:)感谢@Kato和@m.e.conroy的所有帮助

Answer 1

您需要为 ng-click 创建一个方法通过 $index来自 ng-repeat然后在 ng-click 调用的 Controller 方法中从数组中删除图像(当然在用户确认之后)并将其从数据库中删除。从数组中移除它会自动触发 ng-repeat重新渲染。

目前您正在使用 jQuery 从 DOM 中删除对象，但它仍然存在于 Angular 数组中。 Angular 不知道您使用 jQuery 从 View 中删除对象。如果你做了上面描述的事情，你甚至不需要使用 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>

编辑

实际上你只需要通过 $index该方法的参数，因为 splice 返回已删除的元素，这将是您的图像对象。 IE。:

$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)">...