Getting attribute of element in ng-click function in angularjs

Question

I have a span tag like below which call a function in the controller when clicked   HTML   lt div class  row  ng-repeat  event in events  gt       lt div class  col-lg-1 text-center  gt           lt span class  glyphicon glyphicon-trash  data   event id   ng-click  deleteEvent    gt           lt  span gt       lt  div gt   lt  div gt    Controller   scope deleteEvent function        console log this       I need to get the value in data attribute in the controller function  I tried using this keyword and  event  neither one worked   Please help

User · Accepted Answer

Try passing it directly to the ng-click function:

<div class="col-lg-1 text-center">
    <span class="glyphicon glyphicon-trash" data="{{event.id}}"
          ng-click="deleteEvent(event.id)"></span>
</div>

Then it should be available in your handler:

$scope.deleteEvent=function(idPassedFromNgClick){
    console.log(idPassedFromNgClick);
}

Here's an example

User · Answer

Addition to the answer of Brett DeWoody   which is updated now   var dataValue   obj srcElement attributes data nodeValue    Works fine in IE 9   and Chrome  but Firefox does not know the srcElement property  I found   var dataValue   obj currentTarget attributes data nodeValue    Works in IE  Chrome and FF  I did not test Safari

User · Answer

Even more simple  pass the  event object to ng-click to access the event properties  As an example    lt a ng-click  clickEvent  event   class  exampleClass  id  exampleID  data  exampleData  href    gt Click Me lt  a gt    Within your clickEvent     function obj     function you can access the data value like this   var dataValue   obj target attributes data value    Which would return exampleData   Here s a full jsFiddle

[javascript] Getting attribute of element in ng-click function in angularjs

Examples related to javascript

Examples related to angularjs