我有一个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 – AngularJS – 在对象销毁后删除表行的更多相关文章

  1. angularjs – 更新数组时如何避免刷新ng-repeat DOM列表

    因此,“trackby”实际上将检查传入对象的属性并替换旧对象并仍然保留id.这很激烈.值得注意的是,“trackby”也适用于除ng-repeat之外的其他指令,例如select.我做了一个小小的演示,对于那些可能会对一切如何运作感到困惑的人……

  2. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  3. angularjs – 未知提供程序从Angular 1.0切换到1.2.3

    在AngularJS1.2.1中,路径模块已在单个文件angular-route.min.js中拉出,您需要根据发布的错误添加对此文件的引用和angular-sanitize.min.js.您还需要在应用程序中注入ngRoute和ngSanitize:

  4. angularjs – 在测试angular指令时,isolateScope()返回undefined

    使用Angularv1.2.25和rails资产管道,我试图测试指令的隔离范围确实已经更新.由于isolateScope()返回undefined我得到预期未定义的定义…

  5. AngularJS在自定义指令中包含ui-select

    我设法通过在模板中设置ng-model来进行绑定工作

  6. angularJs的国家选择控制

    p=preview使用ng-option指令使用ng-repeat指令:控制器中的国家范围:

  7. angularjs – 如何使用jasmine测试$timeout操作的持续时间?

    假设我在指令中有以下匿名功能:这成功了.现在,如果我想编写一个测试,使用jasmine,以确保在~2s后删除该类,将如何做?我应该补充一点,到目前为止我尝试过使用jasmine.Clock和waitsFor方法,在这两种情况下,测试都失败了.值得注意的是,当我在指令中将$timeout更改为setTimeout时,两个测试都已通过,因此angular的行为似乎在这里发挥作用..从1.2$timeout.flush()开始,需要一个延迟参数来模拟类似于jasmine.Clock模拟的时钟,但是以一种使Ang

  8. AngularJS – 在指令中加载动态模板HTML

    我有一个指令从外部HTML文件加载内容.传递给该指令的是一些范围数据,用于呈现该HTML片段.例如

  9. angularjs – 如何使用webpack编译角度模板?

    我们的想法是从所有html文件中获取1个JS文件.之后通过require使用它:你能分享一下你的体验吗?我正在谷歌搜索它,发现几个装载webpack但不知道该使用什么.我决定将web-pack的ng-cacheloader与ES2015语法一起使用:它意味着从而不是require导入.我的webpack配置的一部分:以及带模板的指令示例:

  10. angularjs google maps – 带窗口的标记 – infowindow不显示

    尝试使用angular-google-maps获取应用:–通过markers指令的多个标记–通过window指令的单个infowindow我已经通过API和git-hub网站上的多个已关闭的问题/问题,但是无法让它正常工作…我认为这是我将窗口html连接到控制器数组和函数的方式?任何帮助表示赞赏.附:api文档examples似乎已过时,因为它们不在示例中使用show,而是使用options.visible来显示和隐藏infowindows–但是所有issues/examples建议使用show代替?

随机推荐

  1. jquery-plugins – 是否可以使用猫头鹰旋转木马实现循环/无限轮播?

    我正在使用猫头鹰旋转木马,它的工作完美,除了它不支持循环/无限滚动.我没有搜索google和stackoverflow的想法,没有运气.有没有人在猫头鹰旋转木马上实现圆形/无限滚动?

  2. jQuery动态输入字段焦点

    我想使用以下jQuery向我的页面动态添加一个输入字段:在这样做之后,我希望输入字段具有闪烁的文本光标的焦点,所以我想在创建后立即输入.有人可以告诉我我该怎么办?

  3. jquery – 为什么$(window).height()这样错了?

    我试图获取当前浏览器的视口高度,使用但我得到的价值观太低了.当视口高度高达850px时,我从height()获取大约350或400像素的值.这是怎么回事?

  4. jquery – 如果在此div之外和其他draggables内部(使用无效和有效的还原选项),则可拖动恢复

    例如这样但是由于明显的原因,这不行.我可以说这个吗?

  5. 创建一个jQueryUI 1.8按钮菜单

    现在jQueryUI1.8已经出来了,我正在浏览更新,并且遇到了新的Buttonwidget,特别是SplitButtonwithadropdown的演示之一.这个演示似乎表明Buttonwidget可以在这里创建一个下拉菜单.作为讨论的问题,我想知道使用这个新的Button小部件来创建一个下拉菜单有什么方法.干杯.解决方法您必须在按钮下方列出一个列表,方式类似于此处为自动完成提供的演示:http

  6. 灰色divs使用JQuery

    我试图使用这个代码:为了淡出一大堆名为MySelectorDiv的div,唯一的是,它只会淡出第一个而不是所有的div,为什么呢?

  7. 使用jQuery动态插入到列表中

    我有两个订单列表在彼此旁边.当我从一个列表中选出一个节点时,我想按照字母顺序插入到另一个列表中.抓住的是我想要把一个元素放在另一个列表中,而不刷新整个列表.奇怪的是,当我插入到右边的列表中,它工作正常,但是当我插入到左边的列表中时,顺序永远不会出来.我也尝试将所有内容读入数组,并将其排序在一起,以防止children()方法没有按照显示顺序返回任何东西,但是我仍然得到相同的结果.这是我的jQuer

  8. 没有回应MediaWiki API使用jQuery

    我试图从维基百科获取一些内容作为JSON:但我没有回应.如果我粘贴到浏览器的地址栏,就像我得到预期的内容.怎么了?解决方法您需要通过添加&callback=?来触发具有$.getJSON()的JSONP行为?在querystring上,像这样:Youcantestithere.没有使用JSONP,你正在击中same-originpolicy,阻止XmlHttpRequest获取任何数据.

  9. jQuery Ajax请求每30秒

    我有这段代码,但是有些人在我的网站上的值可能会改变.我需要每30秒钟更新一次#financediv.这可以做吗解决方法您可以将代码放在单独的函数中,如下所示:然后每30秒建立一个定时器调用该函数:祝你好运!总结以上是DEVMAX为你收集整理的jQueryAjax请求每30秒全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  10. jquery – keypress事件在IE和Chrome中不工作,但在FF工作

    任何想法为什么会这样发生?我通常认为Chrome会更加宽容代码?这是我的按键键.我错过了什么吗?右图();和leftimage();是应该工作的功能,因为我在其他地方使用这些功能谢谢您的帮助!

返回
顶部