AngularJS - Remove table row after object destroyed

Question

I have an AngularJS app that returns a list of json objects and I iterate through those objects and place them into a table. Each item on the table has a "Delete" button with an ng-click method: ``` Delete ``` I am using ng-resource to delete the object - and that works fine. However, I want to also be able to hide (or remove) the row that houses the object and the delete button after it is deleted - preferably by using JQuery. Here is my destroy method: ``` $scope.destroyThing = function() { $scope.thing= this.thing; $scope.thing.$destroy(); $(this.thing).closest("tr").hide(); // something like this maybe } ``` The method destroys the object just fine - it just doesn't remove the row... so I tried logging the object returned when I click the button: ``` $scope.testButton = function() { console.log(this); } ``` That seems to return the angular Scope object itself - but I can't find a way to access any of the DOM e…

Accepted Answer

You don't want to access the DOM from the controller. That's against the Zen of Angular :-D Use `ng-hide` directive: ``` Delete ``` And the controller just change the model value, that `ng-hide` is bound to (in this case `isHidden` property). How do you populate the table ? Are you using `ng-repeat` ? If so, it's enough to just remove the item from the collection that `ng-repeat` repeats over and the DOM will be updated automatically. Check out http://www.youtube.com/watch?v=WuiHuZq_cg4

AngularJS - Remove table row after object destroyed

Solution

Problem