current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 15 down vote favorite
11

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.

share|improve this question

3 Answers 3

up vote 31 down vote accepted

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

share|improve this answer
    
Actually this whole div comes inside ng-repeat. So i cannot use event.id inside ng-click. I think. –  Saravanan Aug 3 '13 at 4:38
    
Check out the jsFiddle link I just added to my answer for an example of using a parameter to ngClick within ngRepeat –  jandersen Aug 3 '13 at 4:42
    
Thanks a lot. I did try this yesterday and spent more than 3 hours. It dint work. I might have made some mistake. Anyways now it works and thanks for the fiddle. It helped. –  Saravanan Aug 3 '13 at 4:47
up vote 33 down vote

You can 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.

share|improve this answer
    
Your jsFiddle works fine in Chrome, but not in FireFox ? –  Michiel Feb 26 '14 at 13:44
    
Thanks for catching this. I've udpated the jsFiddle with a better solution using obj.target. –  Brett DeWoody Feb 26 '14 at 15:53
3  
I found out you can do obj.target.getAttribute("data") looks more readable IMO, js fiddle here: jsfiddle.net/zpApT –  Angelo Moreira Jun 13 '14 at 15:28
up vote 1 down vote

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.

share|improve this answer
1  
Thanks Michiel. I've updated the jsFiddle to address this. I'm using the more universal obj.target property to grab attributes now. –  Brett DeWoody Feb 26 '14 at 15:50
1  
Yes Brett, I agree it's better to use target, updating my code, Thanks! –  Michiel Feb 26 '14 at 19:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.