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

Posted 2023-05-09

【中文标题】AngularJS - 对象销毁后删除表格行

【英文标题】：AngularJS - Remove table row after object destroyed

【发布时间】：2012-05-31 09:48:11

【问题描述】：

我有一个 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>

【参考方案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

【讨论】：

谢谢，我不知道 hide 指令 - 我会寻找相关文档。我正在使用 ng-repeat，但是当我删除模型时，模型的数据会消失，并且空行和按钮仍然留在屏幕上。我将我在该行中使用的代码添加到我的原始帖子顶部。

有什么问题，如果你删除模型，ng-repeat应该删除DOM元素，你可以给jsfiddle发一个简单的例子吗？你可以从这个jsfiddle.net/vojtajina/una6x开始

好的，感谢您的浏览。我在这里做了一个小提琴：jsfiddle.net/phillipkregg/qNB2C/6。我用 Rails 后端制作了这个应用程序，并在 Heroku 上放了一个示例，如果你想自己检查一下行为：high-robot-3535.herokuapp.com/franchise_sets/2/edit。随意添加和删除“特许经营权”。请注意，当您保存一个新的时，它会正确更新 UI。但是当你删除一个时，它会删除数据但不会更新 UI。

老实说，你做了很多疯狂的事情。看看这个简化版。我删除了服务器端通信以使其更简单。关键是：没有 DOM 操作，没有 $destroying 范围等...您只需使用模型，让 Angular 完成艰苦的工作...jsfiddle.net/vojtajina/qNB2C/8

【参考方案2】：

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

使用Angular-UI的jQuery Passthrough（推荐） 写一个Angular directive 并在其中包装DOM 处理。起点：jsfiddle。

【参考方案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>