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

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

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.

Brett DeWoody · Accepted Answer · 2015-06-17 18:23:19Z

83

Even more simple, pass the $event object to ng-click to access the event properties. As an example:

<a ng-click="clickEvent($event)" class="exampleClass" id="exampleID" data="exampleData" href="">Click Me</a>

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.

edited Jun 17, 2015 at 18:23

answered Aug 3, 2013 at 7:23

Brett DeWoody

63.2k31 gold badges145 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Michiel Over a year ago

Your jsFiddle works fine in Chrome, but not in FireFox ?

Brett DeWoody Over a year ago

Thanks for catching this. I've udpated the jsFiddle with a better solution using obj.target.

Immutable Brick Over a year ago

I found out you can do obj.target.getAttribute("data") looks more readable IMO, js fiddle here: jsfiddle.net/zpApT

carmat Over a year ago

Note that if you have a custom data-attribute such as data-example-attr="whatever" then you would need to refer to it like so in your JS: obj.toElement.dataset.exampleAttr

Glen Mazza Over a year ago

@carmat's solution didn't seem to work on FF (worked on Chrome though), functional-rocking's obj.target.getAttribute("data-example-attr") worked for me with both Chrome && FF.

Umur Kontacı · Accepted Answer · 2013-08-03 07:26:25Z

81

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

edited Aug 3, 2013 at 7:26

Umur Kontacı

35.5k8 gold badges76 silver badges96 bronze badges

answered Aug 3, 2013 at 4:35

jandersen

3,56124 silver badges23 bronze badges

2 Comments

Saravanan Over a year ago

Actually this whole div comes inside ng-repeat. So i cannot use event.id inside ng-click. I think.

jandersen Over a year ago

Check out the jsFiddle link I just added to my answer for an example of using a parameter to ngClick within ngRepeat

Michiel · Accepted Answer · 2014-02-26 19:53:10Z

3

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.

edited Feb 26, 2014 at 19:53

answered Feb 26, 2014 at 14:27

Michiel

4,2803 gold badges32 silver badges44 bronze badges

2 Comments

Brett DeWoody Over a year ago

Thanks Michiel. I've updated the jsFiddle to address this. I'm using the more universal obj.target property to grab attributes now.

Michiel Over a year ago

Yes Brett, I agree it's better to use target, updating my code, Thanks!

Collectives™ on Stack Overflow

Getting attribute of element in ng-click function in angularjs

3 Answers 3

5 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related