angularjs – 与REST API的无缝集成

发布时间：2020-12-17 16:57:55 所属栏目：安全来源：网络整理

导读：网上有很多例子向你展示了如何在内存数据中使用ng-repeat,但在我的情况下,我有一个带有无限滚动的长表,通过向REST API发送请求来获取数据(向下滚动 – 获取一些数据,向下滚动再次 – 获取更多数据等).它确实有效,但我想知道如何将其与过滤器集成？现在我必

网上有很多例子向你展示了如何在内存数据中使用ng-repeat,但在我的情况下,我有一个带有无限滚动的长表,通过向REST API发送请求来获取数据(向下滚动 – 获取一些数据,向下滚动再次 – 获取更多数据等).它确实有效,但我想知道如何将其与过滤器集成？

现在我必须调用一个特定的API服务方法,根据“搜索”输入框中的文本发出请求,然后控制器更新$scope.data.

是否可以构建一个自定义过滤器来做到这一点？然后我的观点将完全与服务分离,我可以声明地告诉它如何分组和排序和过滤数据,无论它是在内存中还是来自远程服务器,服务器一次只能提供有限的记录.

后来我也需要分组和排序,我很想下载整个数据集并锁定应用程序的部分负责分组,搜索和排序(直到所有数据都在客户端上),但是：

a)数据集量巨大(数十万条记录)

b)没有人想要处理缓存失效问题

c)这样做真的很错,你真的不希望我把所有数据“保存”在内存中,对吧？

你们能指点我一些开源的例子,我可以从中窃取一些想法吗？

基本上我需要构建一个服务和过滤器,让我可以使用来自api的“可分页”数据,就像在内存数据中一样.

解决方法

无论你如何选择解决它(有许多方法无限滚动角度,这里是一个： http://binarymuse.github.io/ngInfiniteScroll/),在其最新的当前测试版本中,ng-repeat对于大量数据工作非常糟糕 – 过滤器也是如此.原因很明显 – 为变化提取如此多的信息是一项凝灰岩工作.此外,默认情况下,ng-repeat会在每次更改时重新绘制完整列表.
您可以在这个领域探索许多解决方案,以下是我发现的有效方法：

> http://kamilkp.github.io/angular-vs-repeat/#?tab=8
> http://www.williambrownstreet.net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/
> https://github.com/allaud/quick-ng-repeat

您还应该考虑以下内容,它确实有助于处理大量数据.

> https://github.com/Pasvaz/bindonce

更新
我猜你无法真正控制你的服务器输出,因为在服务器端更好地过滤和订购大量数据.
我指出上面的链接,因为即使你编写自己的过滤器(和订单),这很简单 – http://jsfiddle.net/gdefpfqL/ – (按一些公司名称过滤,然后点击“添加更多”按钮 – 添加更多项目).如果您无法控制服务器的数据,那么排序几乎是不可能的 – 唯一的选择是从客户端的内存中获取所有内容,排序然后延迟加载.因此,如果每个列表项都没有自己的多个绑定(如我添加的示例中) – 列表项是相当简单的(例如：您只是将结果显示为纯文本) < li> {{item.name}}< / li>然后,角度ng-repeat可能对您有用.在这种情况下,过滤器将按预期工作 – 假设您按搜索文本过滤：

<li ng-repeat="item in items | filter:searchedText"></li>

即使对于用户搜索文本后添加的新项目,它仍然可以正常工作,因为绑定的魔力.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!