Simer Simer - 10 months ago 79
AngularJS Question

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

I have below code to display records using 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"
<span title="delete photo" ng-show="delete_btn" class="delete_btn_span" rel="[[]]" id="delete_photo_[[]]">
<img src="{{asset('frontend/images/cross_icon.png')}}">
<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="">
{{--<span> </span>--}}


I have to delete records for that I first have to call a function using $http and then I remove element from photos array:

var index = $$('#photo_block_'+id));
$, 1);

Then I remove element from DOM:


I have called deletePhoto function using jqyery like below:

$scope.deletePhoto($(elem), $(elem).attr('rel'));

deletePhoto function further do all the work of deleting elements etc.
But it does not remove element. Where as all the selectors are fine.
Is removing element from photos array causing problem?

Answer Source

With angular JS, you have to deal with data. So you should put an ng-click="delete(photo)" on your span.

and create a method in your controller :

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

to delete the photo from the list.

Your code does not work because $$('#photo_block_'+id)) surely return -1, because you're looking for $('#photo_block_'+id), which is a jquery object in a list of simple json object (i suppose).

So the splice method does anything, and the $ list remain unchanged, so the view is not changed, because it's build from the list by the ng-repeat directive.

ps: you should never manipulate dom element from controller, if you need to do that, you should create directive.