Here is my issue.
HTML structure :
<tr><td><a ng-click=aClick()>Click Me</a></td></tr>
I cannot have any id/class associated with the and
What I require is that on the click of 'Click Me', the <tr> gets hidden. I need a jQuery solution. Some how I am not able to use $(this).
FUNCTION:
$scope.aClick = function() {
$(this).parent().parent().css('display','block');
};
But this statement gives me an error.
Note: I wouldn't recommend using dom manipulation in a controller, you can write a directive to do this. That said you can use the $event to get the event object, from which you can get the event target and use it with jquery.
<tr><td><a ng-click="aClick($event)">Click Me</a></td></tr>
And
$scope.aClick = function(event) {
$(event.target).parent().parent().css('display','none');
};
Demo: Plunker
Update
A more appropriate angular solution will be is to use ng-hide
<tr ng-hide="hideRow"><td><a ng-click="hideRow = true">Click Me</a></td></tr>
Demo: Plunker
Updated demo with ng-repeat
You can use this:
JavaScript
function TestCtrl($scope) {
$scope.clickMe = function ($event) {
$($event.target).parent().parent().css('display','none');
};
}
HTML
<div ng-app>
<div ng-controller="TestCtrl">
<a ng-click="clickMe($event)">Click me</a>
</div>
</div>