Документ о событии клика, который не срабатывает

Question

Я извлекаю детали изображения из базы данных и показываю их в виде сетки. Вот код.

<div ng-repeat="imageUrl in images" class="col-xs-3 img-wrap"> 

    <span class="close" id="close">&times;</span> 
    <div class="my-gallery" itemscope id="grid" > 

    <figure itemprop="associatedMedia" > 

    <a href="{{imageUrl}}" id="thumb" name="{{pid[$index]}}" class="thumbnail " itemprop="contentUrl" data-id="{{pid[$index]}}" data-size="800x600"> 
    <img src="" class="img-responsive " data-id="{{pid[$index]}}" id="{{pid[$index]}}" ng-src="{{thumb[$index]}}" style="min-height:50px;height:50px;"> 
    </a> 

    </figure> 

</div> 
</div> 

Он работает правильно. Я добавил кнопку удаления (x) вот так, чтобы удалить изображение. Как только пользователь нажимает на крест-кнопку, я планирую запустить ajax-код, чтобы удалить изображение с сервера.

Итак, в основном я хочу, чтобы событие click удаляло изображение. Я пробовал код jQuery, но это не работает. Если возможно, пожалуйста, сообщите мне об Угловом способе, поскольку я не хочу использовать jQuery.

$('#close').on('click', function() { 
    var id = $(this).closest('.img-wrap').find('img').data('id'); 
    alert('remove picture: ' + id); 
    alert('test'); 
}); 

Пробовал это также.

$('.img-wrap .closer').on('click', function() { 
    var id = $(this).closest('.img-wrap').find('img').data('id'); 
    alert('remove picture: ' + id); 
    alert('test'); 
}); 

Edit: Я попытался ngclick события, и она работает, но я хочу знать, как я могу скрыть соответствующее изображение в ngclick.

$scope.myFunc = function(btnId) { 
      alert(btnId); 


    }; 

Answer 1

Как вы указали в вопросе, JQuery не правильный способ сделать это, вы должны использовать угловой.

Вы можете передать аргументы функции ng-click, и так вы можете передать идентификатор.

<span class="close" id="close" ng-click="remove(pid[$index])">&times;</span> 

И в контроллере

function remove(id) { 
    alert('remove picture: ' + id); 
}