Angularjs ng-click: how to get `this` data?

Question

Let say I have this item in the list with angular ng-click event.

<a data-id='102' ng-click='delete()'>Delete</a> 

How can I get the data/ info if this then?

        $scope.delete = function() {               var id = $(this).attr('data-id');              console.log(id); // I want to get 102 as the result              if (confirm('Are you sure to delete?')) {                 $('#contactsGrid tr[data-id="' + id + '"]').hide('slow');              }          }; 

Answer 1

The right solution will be is to pass the id as an parameter to the delete function like

<a data-id='102' ng-click='delete(102)'>Delete</a> 

then

    $scope.delete = function(id) {          console.log(id); // I want to get 102 as the result          if (confirm('Are you sure to delete?')) {             $('#contactsGrid tr[data-id="' + id + '"]').hide('slow');          }      }; 

---

This should not be done, but just to demonstrate

Inside ng-click you can get the event using $event, so

<a data-id='102' ng-click='delete($event)'>Delete</a> 

then

$scope.delete = function (e) {     var id = $(e.target).data('id');     console.log(id); // I want to get 102 as the result }; 

Demo: Fiddle

Answer 2

To access clicked link tag attributes

In jQuery,

<a class='test' data-id='102' ng-click='delete(102)'>Delete</a> 

on click of above link is handled as

$('.test').click(function(){    console.log($(this).attr('data-id'));  }); 

Demo code for jQuery : fiddle

In Angularjs,

<a class='test' data-id='102' ng-click='delete($event)'>Delete</a> 

on click of above link is handled as

$scope.delete = function (e) {     console.log($(e.currentTarget).attr("data-id"));   } 

Demo code for Angularjs : fiddle