AngularJS - 在对象销毁后删除表行

Question

我有一个AngularJS应用程序，它返回一个json对象列表，然后迭代这些对象并将它们放到一个表中。

表格中的每个项目都有一个带有ng-click方法的“删除”按钮：

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

我正在使用ng-resource删除对象 - 这样可以正常工作。

但是，我希望能够隐藏（或删除）容纳对象的行和删除后的删除按钮 - 最好是使用 JQuery 。

这是我的破坏方法：

$scope.destroyThing = function() {
        $scope.thing= this.thing;
        $scope.thing.$destroy();
        $(this.thing).closest("tr").hide(); // something like this maybe
    }

该方法很好地销毁了对象 - 它只是不删除行...所以我尝试记录单击按钮时返回的对象：

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

这似乎返回了角度Scope对象本身 - 但我找不到一种方法来访问它所涉及的任何DOM元素。

这是一个屏幕截图，显示从testButton函数返回的对象 - 当然是通过单击按钮触发：

如何使用JQuery访问与Angular对象相关的DOM元素？

修改

这是完整的表格行：

<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

您不想从控制器访问DOM。那是反对Angular的禅宗:-D

使用ng-hide指令：

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

控制器只是更改ng-hide绑定的模型值（在本例中为isHidden属性）。

你如何填充表格？你在使用ng-repeat吗？如果是这样，只需从ng-repeat重复的集合中删除该项，DOM就会自动更新。

查看http://www.youtube.com/watch?v=WuiHuZq_cg4

Answer 2

虽然直接搞乱DOM不是Angular的方式，对于来自谷歌的人来说仍然需要这样做，将DOM元素传递给现有的jQuery插件或其他东西：

1. 使用Angular-UI的jQuery Passthrough（推荐）
2. 写一个Angular directive并将DOM处理包装在那里。起点：jsfiddle。

Answer 3

使tableRowClicked方法将行作为参数。

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