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:

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

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 elements that it relates to.

Here is a screenshot to show you the object returned from the testButton function - which is triggered by clicking the button of course:

enter image description here

How can I access DOM elements related to the Angular object with JQuery?

EDIT

Here is the complete table row:

<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>

Vojta · Accepted Answer · 2012-05-24 20:45:12Z

10

You don't want to access the DOM from the controller. That's against the Zen of Angular :-D

Use ng-hide directive:

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

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

answered May 24, 2012 at 20:45

Vojta

23k5 gold badges52 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

PhillipKregg Over a year ago

Thanks, I didn't know about the hide directive - I will look for the docs on that. I am using ng-repeat, but when I delete the model, the data for the model disappears and the empty row along with the buttons are left still on the screen. I added the code I'm using on the row to my original post up top.

Vojta Over a year ago

There's something wrong, if you remove the model, ng-repeat should remove the DOM element, can you send a simple example to jsfiddle ? You can start from this jsfiddle.net/vojtajina/una6x

PhillipKregg Over a year ago

Ok, thanks for taking a look. I made a fiddle here: jsfiddle.net/phillipkregg/qNB2C/6. I made the app with a Rails backend and put a sample of it on Heroku if you want to checkout the behavior for yourself: high-robot-3535.herokuapp.com/franchise_sets/2/edit. Feel free to add and delete "franchises". Notice that when you save a new one, it updates the UI properly. But when you delete one, it removes the data but does not update the UI.

Vojta Over a year ago

Honestly, you are doing lot of crazy stuff. Check out this simplified version. I removed the server-side communication to make it simpler. The point is: there is no DOM manipulation, no scope $destroying, etc... you just work with the model, and let Angular do the hard work... jsfiddle.net/vojtajina/qNB2C/8

mb21 · Accepted Answer · 2012-09-07 18:34:36Z

2

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

Use Angular-UI's jQuery Passthrough (recommended)
Write an Angular directive and wrap the DOM handling in there. A starting point: jsfiddle.

answered Sep 7, 2012 at 18:34

mb21

40.3k8 gold badges130 silver badges158 bronze badges

Comments

Stephen · Accepted Answer · 2012-09-06 07:56:28Z

0

Make your tableRowClicked method take the row as a argument.

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

answered Sep 6, 2012 at 7:56

Stephen

4,3464 gold badges31 silver badges43 bronze badges

Collectives™ on Stack Overflow

AngularJS - Remove table row after object destroyed

EDIT

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related