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

Question

我有以下代码使用 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>

我必须删除记录，因为我首先必须使用 $http 调用函数，然后从照片数组中删除元素：

  var index = $scope.photos.indexOf($('#photo_block_'+id));
        $scope.photos.splice(index, 1);

然后我从 DOM 中删除元素：

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

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

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

deletePhoto 函数进一步完成删除元素等所有工作。但它不会删除元素。所有选择器都很好。从照片数组中删除元素会导致问题吗？

Answer 1

使用angular JS，你必须处理数据。所以你应该在你的跨度上放一个 ng-click="delete(photo)"。

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

$scope.delete = function(photo) { // delete froms scope.photos here... }

从列表中删除照片。

你的代码不起作用，因为 $scope.photos.indexOf($('#photo_block_'+id)) 肯定是 return -1，因为你正在寻找 $('#photo_block_'+id)，这是一个 jquery 对象列表中的简单 json 对象（我想）。

所以 splice 方法做任何事情，$scope.photos 列表保持不变，所以视图没有改变，因为它是通过 ng-repeat 指令从列表构建的。

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

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

Removing element from ng-repeat does not allow to remove or hide element from DOM

angularjs

ng-repeat