javascript - ngRepeat 中复杂的 HTML 结构与深 Scope 对象使事情变慢

标签 javascript html css angularjs angularjs-ng-repeat

这更多是征求意见或人们可能遇到的一些解决方案。我根据通过 API 获取的 $scope 对象呈现航空公司行程列表。总而言之,在我循环遍历并显示在页面上的数组中最多可以有 150 个。由于我们优秀的设计机构,这些行程在 HTML/CSS 方面相对复杂/繁重。行程包括我在 ngRepeat 期间使用的大约 20 多个属性。例如飞行时间、目的地、中途停留等。实际 Itinerary 对象非常深,但我将循环限制为 3-4。并尽可能根据直接访问 journey[0]/journey[index] 获取属性,而不是对子对象使用另一个 Repeat。虽然有些情况下这是不可能的,但我必须再次循环。

我的问题是我的重复速度变得很慢。页面加载困难,滚动同样滞后。暂时基本用不上。我想我正在尝试找出一些使用多个嵌套重复的最佳实践,然后是复杂的 HTML 结构。

提前感谢您的帮助。

最佳答案

您需要创建一个虚拟中继器。您可以使用网络上的其中一种解决方案或烘焙您自己的作品之一。

这个想法很简单,您一次只渲染少量的“行”(要重复的元素)。

我知道有时这会变得棘手,所以我在 github 中有一个带有简单中继器的小要点

您可以在这里找到它:https://gist.github.com/scyrizales/f2a297db522e2d789f69f70e7151ce7e

想法是用 virtual-repeat 替换你的 ng-repeat:

<div ng-repeat="item in collection"></div>

为此:

<div virtual-repeat="item in collection"></div>

我建议你只在你的外部中继器中使用它,我的解决方案只允许重复数组(所以集合应该是一个数组)

希望对你有帮助:)

关于javascript - ngRepeat 中复杂的 HTML 结构与深 Scope 对象使事情变慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37039713/

相关文章:

javascript - getjson 数组 jquery 未定义

php - 使用 PHP/MySQL 和 JavaScript 填充多个 HTML Div

html - 自定义字体不起作用

html - 奇偶元素的左右浮动

jquery - 为什么在 IE 8 上,jQuery SlideToggle 会删除边距,但仅在单击文本时才删除?

javascript - 如何在 jQuery 中缩小和恢复 Div

javascript - Playground.js 未渲染

javascript - 使用自定义上一个和下一个按钮 (FullCalendar)

javascript - 将复杂的 json 对象绑定(bind)到 knockout 下拉菜单

html - 带有 HTML 的 UIActivityViewController