如何从数组中过滤数据并使用角度js应用无限滚动？

Posted 2023-03-07

【中文标题】如何从数组中过滤数据并使用角度js应用无限滚动？

【英文标题】：How to filter data from array and apply infinite scroll using angular js?

【发布时间】：2015-06-02 15:25:11

【问题描述】：

我有一个查询所有记录并将其推送到数组的要求。而且由于我要显示大约 2000 条记录，因此需要更多时间。所以我想实现无限滚动。但我有过滤功能。那么，当搜索框包含搜索词时，如何最初在滚动上显示所有记录并在滚动上显示过滤后的记录？请帮忙。

提前致谢！

【问题讨论】：

您确实需要发布一些代码。这不是人们为您编写代码的地方。如果您还没有尝试过，可以查看sroze.github.io/ngInfiniteScroll

【参考方案1】：

这是一个稍微复杂的任务，因为内置的角度过滤器要求所有元素都在本地数组中才能过滤。所以你不能使用它，必须将过滤的任务移到服务器上，例如使用 sql %like% 查询。

您需要重用记录数组和分页组件。所以有2个用例：

用户正在查看未过滤的列表 用户输入了有效的搜索查询并正在查看过滤列表

当用户查看未过滤列表时，您正在查询 API 端点 ex：

server.com/api/records?page=page_number

当用户查看过滤列表时，您正在查询 API 端点 ex：

server.com/api/records?page=page_number&query=mysearchquery

---

所以整个任务变成：

用户正在查看未过滤的列表

用户在搜索框中输入搜索词

使用 debounce 来检查输入查询的有效性，例如：长度 > 4

前端清除整个记录列表，并重置任何分页状态

过滤后的列表现在出现分页

当用户清除搜索框时：

清除过滤记录列表并重置分页状态 再次开始对未过滤列表进行分页

如果您对流程的任何部分有任何具体问题，我很乐意更新我的答案。