jquery - 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);
    }

这似乎返回了 Angular 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

您不想从 Controller 访问 DOM。这违背了 Angular 的禅宗:-D

使用ng-hide指令:

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

Controller 只需更改 ng-hide 绑定(bind)的模型值(在本例中为 isHidden 属性)。

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

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