如何在自定义多选下拉列表中嵌入数字分页链接

时间:2016-05-08 10:17:36

标签: angularjs angularjs-directive pagination

我想承认我在角度和学习方面都不是很好。我必须加载大量数据,并必须通过下拉列表显示。如果我可以在下拉列表中进行分页,我更愿意。我正在处理一个很好的自定义下拉列表,取自此网站http://developers.dss.ucdavis.edu/angularjs-serachable-multiselect-dropdown-directive/

但上面的自定义多选下拉列表缺少一个显示分页链接的功能。所以问题是用户无法显示最小数据并按需点击其他链接来加载下一组数据。只是想知道有人想在自定义指令中添加代码,在那里添加分页功能。

所以我一次可以加载20个数据并点击下一个分页链接来加载下一个20个数据。我见过人们已经开发了角度分页指令。这里有一个类似的链接http://angularjs4u.com/pagination/top-5-angularjs-pagination-demos-2014/因此我是角度新手,所以不明白如何在另一个自定义多选下拉指令中添加自定义分页指令。

如果有人告诉我如何实现它,那将是非常好的帮助。感谢

1 个答案:

答案 0 :(得分:1)

使用他们在该博客中使用的相同UI Bootstrap,有一个分页指令。

Here's a Plunkr

这里有几个关键点:

  1. 将正常ng-repeat设置为已过滤变量,以允许更新搜索过滤器以及分页。

    ng-repeat="item in filtered = (allItems | filter: ...
    
  2. 在过滤器后的同一重复中,您设置“limitTo”以在列表上设置分页

    ... ) | limitTo:limit:begin
    

    然后你只需要关注ui bootstrap pagination   <uib-pagination total-items="filtered.length">