AngularJS - delete a column after a destroyed object

Question

I have an AngularJS application that returns a list of json objects, and I repeat these objects and put them in a table.

Each table element has a Delete button using the ng-click method:

<td><a ng-click="testButton()" class="btn btn-danger btn-mini">Delete</a></td> 

I use ng-resource to delete an object - and that works fine.

However, I also want to hide (or delete) the line where the object is located, and the delete button after deleting it - preferably 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 completely destroys the object - it just does not delete the line ... so I tried registering the returned object when I click the button:

 $scope.testButton = function() { console.log(this); } 

It seems to return an angular Scope object, but I cannot find a way to access any of the DOM elements to which it refers.

Here is a screenshot showing you the object returned by the testButton function, which is launched by the click of a button, of course:

How can I access the DOM elements associated with an angular object using jQuery?

EDIT

Here is the full row of the table:

 <tr ng-repeat="franchise in franchises"> <td ng-model="franchiseName">{{franchise.franchise_name}}</td> <td ng-model="franchiseNumber">{{franchise.franchise_number}}</td> <td><a class="btn btn-mini">Edit</a></td> <td><a ng-click="destroyFranchise()" class="btn btn-danger btn-mini">Delete</a></td> </tr> 

Answer 1

You do not want to access the DOM from the controller. This is against Zen Angular: -D

Use the ng-hide directive:

 <td><a ng-click="hide()" ng-hide="isHidden">Delete</a></td> 

And the controller will simply change the model value that ng-hide tied to (in this case, the isHidden property).

How do you fill out the table? Are you using ng-repeat ? If so, simply remove the item from the collection, which ng-repeat repeats, and the DOM will update automatically.

Check out http://www.youtube.com/watch?v=WuiHuZq_cg4

Answer 2

While messing directly with the DOM is not Angular's way for people coming from Google who still need to do this, passing the DOM element to an existing jQuery plugin or something else:

• Use Angular-UI jQuery Passthrough (Recommended)
• Write an Angular directive and complete the DOM processing. Starting point: jsfiddle .

Answer 3

Make your tableRowClicked method take a row as an argument.

 <tbody id= "table_row"> <tr ng-repeat="row in rows" ng-click="tableRowClicked(row)"> <td ng-repeat="col in row">{{col}}</td> </tr>