jquery – AngularJS – 在对象销毁后删除表行

前端之家收集整理的这篇文章主要介绍了jquery – AngularJS – 在对象销毁后删除表行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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>

解决方法

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

猜你在找的jQuery相关文章