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');

            }
         };

Don't know why this got downvotes. It's a valid question for someone new to the AngularJS approach, and it's expected that someone new to AngularJS would be looking to StackOverflow for guidance. — Christopher Parker, Jul 23 '14 at 23:34
@ChristopherParker +1 not to mention that it's a really well written question compared to many...! — dudewad, Dec 02 '14 at 19:06
I have to same question. I am new to AngularJS and JQuery and interaction between them is not so easy to understand. — Elo, Mar 23 '15 at 12:31

score 49 · Accepted Answer · answered Dec 28 '13 at 12:16

49

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

answered Dec 28 '13 at 12:16

Arun P Johny

384,651
66
527
531

1

Yep, best to think about `delete()` independently of how its called. Happens to be from a click, but in the general case it wouldn't. Note though: presumably this tag is inside of some kind of ng-repeat? If so, the iterated item is in scope and would be accessible via `this`. – jpsimons Dec 28 '13 at 18:31
4

Thanks I was looking for this answer. But why not to use the $event ? – KeizerBridge Sep 08 '14 at 09:33
1

bump. also curious as to why not use $event? – youri Oct 30 '14 at 11:30
@youri sorry, what about `$event`? and how do you suggest to use it – Arun P Johny Oct 30 '14 at 11:38
1

I'm using your solution. that works fine for me. however i am curious why you write "This should not be done, but just to demonstrate.". I'm curious why one should not use the $event solution. – youri Nov 10 '14 at 12:51
1

This should not be done because of the AngularJS concept if we believe this post : [link](http://stackoverflow.com/questions/12430820/accessing-clicked-element-in-angularjs) – Elo Mar 23 '15 at 12:53
Nice answer this is resole to my problum thank @ArunPJohny – Rohit Azad Malik May 19 '17 at 11:55

score 4 · Answer 2 · edited Nov 02 '17 at 13:51

4

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

edited Nov 02 '17 at 13:51

Bartando

719
8
26

answered May 05 '15 at 09:19

aashish

2,453
1
21
19

3

Wouldn't you get $ is not defined? – Winnemucca Aug 27 '15 at 00:05

score 2 · Answer 3 · answered Feb 08 '16 at 10:36

You can also access the event data for Jquery in angular using:

  $scope.myClickedEvent = function(clickEvent) {
    $scope.clickEvent = simpleKeys(clickEvent);
    angular.element(clickEvent.currentTarget);
    console.log(angular.element(clickEvent.currentTarget).text());
   /*
   * return a copy of an object with only non-object keys
   * we need this to avoid circular references
   */
   function simpleKeys (original) {
    return Object.keys(original).reduce(function (obj, key) {
      obj[key] = typeof original[key] === 'object' ? '{ ... }' : original[key];
      return obj;
    }, {});
  }
};

Your clicked element should contain an ng-click like this

ng-click="myClickedEvent($event)"

score 0 · Answer 4 · answered Nov 09 '16 at 15:08

If for some other reason, you still need to access the element here's how I did it :

<span ng-click="selectText($event)"></span>

and in the controller

$scope.selectText = function(event) {
  var element = event.currentTarget; // returns the span DOM Element
  // Now you can access its dataset just like in plain old JS
  // In my case it was for selecting the content of a tag on click anywhere on the tag
};

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

4 Answers4