Angularjs ng-click: how to get `this` data?
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
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
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)"