Getting attribute of element in ng-click function in angularjs
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.
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.
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
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.