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

2024-01-04

我正在构建邮件系统的前端。它很好地分为控制器和服务。我使用 $interval 来检查新邮件,这些邮件以 JSON 形式接收并添加到模型中。

一切都很好地呈现在屏幕上,带有用于选择删除邮件的复选框和按钮等......

问题是,当一个人做出选择时 - $interval 将检查新邮件,并用传入数据替换模型数组,重新创建 DOM 并重置所有选择,无论它是否包含新数据或相同数据。前端的整个想法是避免用户一直点击“更新”。

我认为 angular.copy 可以让我免于头痛,但是没有......我阅读了各种关于在模型中包含日期以区分传入模型和现有模型的奇怪内容。

对于这个问题,我只能想出一种解决方案,那就是自己编写函数,将传入数组和现有数组与两个对象上的所有现有属性进行比较。外汇。 obj1.id == obj2.id 然后检查属性,如果对象不存在则添加对象。

我在淘汰赛中被宠坏了,因为它涉及这类事情。 (当将相同的 JSON 数组发送到可观察对象时,它不会重新创建 dom - 单独留下我的复选框/dom 更改)。

有谁对这个问题有一个好的解决方案,或者有人可以推荐某种黑客吗?我对一切都持开放态度!我已经绝望了。


我找到了解决办法!

在浏览并进一步检查我的场景中的“track by”之后,我可以看到它实际上做了更多的事情:

1) 如果您有一个对象集合,每个对象都具有:id、名称、描述,您可以使用“跟踪依据”选择它连接到的属性,因此,在从 Web 服务检索新的对象集合时,它不会渲染属于该值的 DOM 对象。

2)最重要的是,也是我所追求的:如果具有现有 id 的对象从服务器到达且名称已更改,那么它是否会反映在具有该 id 的对象的数组集合中?是的,它会的!因此,“track by”实际上会检查传入对象的属性并替换旧对象,但仍保留 id。太激烈了。

还值得注意的是,“track by”也适用于除NG-重复, 例如select.

我为其他可能对一切如何运作感到困惑的人做了一个小演示......但这似乎很酷!

    <div ng-repeat='country in countryArray track by country.id'>
        {{country.id}}
        {{country.name}}
        <input type="checkbox"></input>
    </div>

    <div>
        <select ng-model='nonExisting' 
          ng-options='country.name for country in countryArray 
            track by country.id'></select>
    </div>
</div>

http://jsfiddle.net/KUf8C/ http://jsfiddle.net/KUf8C/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

数组更新时如何避免刷新 ng-repeat DOM 列表 的相关文章

  • console.log 未显示正确的值[重复]

    这个问题在这里已经有答案了 我正在尝试控制台一个对象 尽管它没有抛出任何错误 但我想要的结果在一段时间后显示 但我无法检索它 它显示一个 i 图标 上面写着 刚刚评估了下面的值 但我无法获取该值 OUTPUT Promise state s
  • PHPExcel下载文件

    我想下载使用 PHPExcel 生成的 Excel 文件 我按照以下代码PHPExcel 强制下载问题 https stackoverflow com questions 26265108 phpexcel force download i
  • 从 JSON 文件注入的编译指令 AngularJS

    希望有人能帮助我应对这一挑战 我使用以下命令从服务器请求 JSON 数据 http get 来自服务器的数据返回一个对象 对象中的一个值包含 HTML 标记 该标记使用以下方式注入到页面中 div div 在标记内 有一个名为的自定义指令
  • Ionic-Angular.js 拍照并发送到服务器:空图像

    因此 我设法使用自定义指令通过 Angular js 将图像上传到我的服务器 我还成功地实现了 Cordova 的相机功能 现在我尝试连接两者 但是当将图像发送到服务器时 它们被存储为空 我认为问题在于我使用输入字段来获取图像 并且它获取了
  • 未捕获的 ReferenceError:未定义角度 - Mean.IO

    我已遵循安装步骤 http mean io docsmean io 但是当我浏览 localhost 3000 时 我得到一个空白页面 当我打开控制台时 我得到一个指向相同错误的文件列表 未捕获的引用错误 角度未定义 我的问题是类似的to
  • Jasmine-jQuery loadFixtures 未定义

    我对整个茉莉花的事情仍然很陌生 在过去的几个小时里我陷入了这个问题 我尝试使用 loadFixture 加载外部夹具文件 我使用 Jasmine 2 0 0 和 Jasmine jQuery 2 0 5 ReferenceError loa
  • 如何使用 $resource 获取状态代码?

    我提出请求的工厂在这里 angular module myapp factory testResponse http resource AppConfig routeParams rootScope function http resour
  • 打开 md-calendar 时滚动到当前日期

    目前正在构建一个使用 Angular Material 的应用程序 我们需要一个 md calendar 组件 我们想要自定义按钮样式和内容 因此不使用普通的 md datepicker 问题是 当 md calender 打开时 滚动位置
  • ng-submit 不允许自定义绑定提交事件

    我有一个指令 我想用它在提交表单时广播事件 我正在做的项目有很多表单 因此无法在ng submit调用的函数中广播事件 指示 directive form function return restrict E link function s
  • Angular,当任何资源处于待处理状态时显示加载

    我已经编写了一段代码来显示加载器 div 当任何资源处于待处理状态时 无论它是通过 http get 还是路由 ng view 获取的 我不仅仅想要信息 如果我变坏了 流程处理服务 app service flowHandler funct
  • 如何知道在Angular JS中选择了哪个元素

    我制作了多个选定的弹出窗口 用户可以在其中选择多个值 我想在屏幕上打印所有选定的值或获取一个对象 其中包含用户选择的所有元素 我将换句话说 在我的演示中 我在屏幕上有一个按钮 单击按钮时 我会打开一个弹出窗口 其中有多个选定的元素我想获取用
  • Ionic/Cordova 应用程序中的身份验证

    首先 我不是专业人士 在我成为一名更好的开发人员的过程中 我试图了解需要什么以及如何完成为 Ionic Framework 应用程序创建注册 登录 大多数单页应用程序 SPA 在节点服务器上处理身份验证 该服务器还为客户端提供 HTML 就
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并
  • 嵌套指令 - 无法将参数从 Angularjs 中的子指令传递到控制器方法

    我在 angularjs 中的嵌套指令方面遇到了一些问题 我想从另一个指令中的指令调用控制器方法 并尝试将参数传递给它 但是它们是未定义的 我尝试使用下面的 selected html 中的三个参数来调用remove 在我引入父指令 tel
  • jQuery 插件不能很好地与 Angularjs 配合使用

    我用过jQuery 滑块在我的项目中 我使用 Angular 加载图像 我目前的观点是这样的 div div class slides container a href img width 919 height 326 alt a div
  • 如何像在 jQuery 中一样在 AngularJS 中触发事件?

    是否可以做类似的事情 container trigger click 仅使用 AngularJS 如果不可能trigger 还有其他方法来管理这种行为吗 我有一个基本示例 可以在单击按钮时创建一个框 创建的框是可拖动的 现在 用户必须单击按
  • 如何获取 ng-repeat 中的前一项?

    我有一个模板 仅当当前项目与前一个项目有一些不同的字段时 我才想生成一些 HTML 如何访问 ng repeat 中的前一项 你可以做类似的事情 div ul li div class title index content title c
  • angularjs ui-router:获取给定状态的子状态列表

    您知道 ui router 中获取给定状态的子状态列表的方法吗 我正在使用 ui router 实现一个复杂的 SPA 可能有 4 级深度导航 我想实现从路由器表自动生成的第二级导航选项卡界面 为此 我需要获取给定状态 可能是抽象状态 的直
  • 用数组反向查找对象

    假设我有一个这样的对象 resourceMap a 0 1 2 3 4 5 6 7 8 9 10 b 11 12 c 21 23 d 54 55 56 57 510 确定是否的最佳方法是什么resourceId 21将会 c 我们不知道钥匙
  • 如何在 e2e AngularJS 测试中进行文件上传?

    在我的一种观点中 我有一个文件上传控件 它支持通过拖放或单击按钮后打开的标准文件对话框上传文件 How to do this in my e2e tests1 1 Just one of the two options will be en

随机推荐