6

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

这似乎返回了角度范围对象本身 - 但我找不到访问它相关的任何 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>
4

3 回答 3

10

您不想从控制器访问 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

于 2012-05-24T20:45:12.527 回答
2

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

  1. 使用Angular-UI的 jQuery Passthrough（推荐）
  2. 编写一个Angular 指令并在其中包装 DOM 处理。一个起点：jsfiddle。
于 2012-09-07T18:34:36.887 回答
0

使您的 tableRowClicked 方法将行作为参数。

<tbody id= "table_row">
 <tr ng-repeat="row in rows" ng-click="tableRowClicked(row)">
    <td ng-repeat="col in row">{{col}}</td>
</tr>
于 2012-09-06T07:56:28.093 回答