Angularjs 从ng repeat中删除元素不允许从DOM中删除或隐藏元素

我有以下代码使用ng repeat显示记录：

<div class="gallery">
        <div ng-cloak
             ng-repeat="photo in photos| orderBy:'-id'"
             ng-mouseLeave = "delete_btn = !delete_btn"
             ng-mouseEnter = "delete_btn = !delete_btn"
             class="gallery_block"
             id="photo_block_[[photo.id]]">
            <span title="delete photo" ng-show="delete_btn" class="delete_btn_span" rel="[[photo.id]]" id="delete_photo_[[photo.id]]">
               <img  src="{{asset('frontend/images/cross_icon.png')}}">
            </span>
            <p>
                <a href="javascript:;">
                    <img ng-click="showImagePopup([[photo.path_popup_thumbnail]]);" src={{$public_path}}./image.php?width=149&height=109&cropratio=2:1.4&image=[[photo.path_popup_thumbnail]] alt="">
                </a>
                {{--<span> </span>--}}
            </p>
        </div>

    </div>

然后我从DOM中删除元素：

$('#photo_block_'+id).remove();

更新 我使用jqyery调用了deletePhoto函数，如下所示：

 $(".gallery").on('click','span.delete_btn_span',function()
{   
    $scope.deletePhoto($(elem), $(elem).attr('rel'));
});

deletePhoto函数进一步完成删除元素等所有工作。 但它不会删除元素。所有的选择器都很好。

---

从照片数组中删除元素是否会导致问题？

对于angular JS，您必须处理数据。因此，您应该在span上添加一个

ng click=“delete（photo）”

并在控制器中创建一个方法：

$scope.delete=函数（照片）{
//从S scope.photos中删除此处。。。
}

从列表中删除照片

您的代码不起作用，因为

$scope.photos.indexOf（$（'photo_block_'+id））

肯定会返回-1，因为您正在查找$（'photo_block_'+id），它是简单json对象列表中的一个jquery对象（我想）

因此，splice方法可以执行任何操作，$scope.photos列表保持不变，因此视图不会更改，因为它是通过ng repeat指令从列表中构建的

---

ps：您永远不应该从控制器中操作dom元素，如果您需要这样做，您应该创建指令。

对于angular JS，您必须处理数据。因此，您应该在span上添加一个

ng click=“delete（photo）”

并在控制器中创建一个方法：

$scope.delete=函数（照片）{
//从S scope.photos中删除此处。。。
}

从列表中删除照片

您的代码不起作用，因为

$scope.photos.indexOf（$（'photo_block_'+id））

肯定会返回-1，因为您正在查找$（'photo_block_'+id），它是简单json对象列表中的一个jquery对象（我想）

因此，splice方法可以执行任何操作，$scope.photos列表保持不变，因此视图不会更改，因为它是通过ng repeat指令从列表中构建的

---

---

ps：您永远不应该从控制器中操作dom元素，如果您需要这样做，您应该创建指令。

停止使用jquery。$scope.photos数组不包含jquery对象。它只包含照片对象。所以$scope.photos.indexOf（$（'#photo_block_'+id））将始终为-1。“删除”按钮应具有“ng click=“deletePhoto（photo）”。deletePhoto（）应该只从数组中删除传递的照片。angular将自动重新显示数组。您的选择器（

$（'#photo_block.+id）

）看起来像jquery。您正在使用jquery吗？但它不会重新显示，元素仍保留在那里。顺便说一句，我使用了.hide（）而不是从数组中删除元素，它的性能很好。是的，我也在使用jQuery。使用ng if将更好地停止使用jQuery。$scope.photos数组不包含jquery对象。它只包含照片对象。所以$scope.photos.indexOf（$（'#photo_block_'+id））将始终为-1。“删除”按钮应具有“ng click=“deletePhoto（photo）”。deletePhoto（）应该只从数组中删除传递的照片。angular将自动重新显示数组。您的选择器（

$（'#photo_block.+id）

）看起来像jquery。您正在使用jquery吗？但它不会重新显示，元素仍保留在那里。顺便说一句，我使用了.hide（）而不是从数组中移除和移除元素，它的性能很好。是的，我也在使用jQuery。如果使用ng if会更好，我必须使用jQuery调用deletePhoto，因为我的delete按钮最初在DOM中不存在，所以ng click会给出inprog角度错误。在这里，我使用$timeout of angular and wrapped调用来删除其中的照片。我应该在$scope.photos.indexOf（？）中传递什么？为什么说删除按钮最初不存在？ng repeat指令将为每个迭代创建一个不同的按钮。。。您的按钮仅被ng show隐藏。。。如果在span上使用ng click=“deletePhoto（photo）”，则deletePhoto方法将在参数中使用photo to delete调用，然后您可以将其从列表中删除…因为用户可以添加新记录。这没关系，我希望当用户添加记录时，您只需向$scope.photos添加新元素即可？（我希望…）每次更新$scope.photos时，angular都会更新视图，因此它也会为新创建的记录创建一个删除按钮。我必须使用jquery调用deletePhoto，因为我的删除按钮最初在DOM中不存在，所以ng click会给出angular的inprog错误。在这里，我使用$timeout of angular and wrapped调用来删除其中的照片。我应该在$scope.photos.indexOf（？）中传递什么？为什么说删除按钮最初不存在？ng repeat指令将为每个迭代创建一个不同的按钮。。。您的按钮仅被ng show隐藏。。。如果在span上使用ng click=“deletePhoto（photo）”，则deletePhoto方法将在参数中使用photo to delete调用，然后您可以将其从列表中删除…因为用户可以添加新记录。这没关系，我希望当用户添加记录时，您只需向$scope.photos添加新元素即可？（我希望…）每当更新$scope.photos时，angular将更新视图，因此它还将为新创建的记录创建一个删除按钮。

 $(".gallery").on('click','span.delete_btn_span',function()
{   
    $scope.deletePhoto($(elem), $(elem).attr('rel'));
});