CODEWITHSUNDEEP
angularjsangularjs-directivepagination
Mou
Mou

Reputation: 16292

How to embed numeric pagination links in custom multi select dropdown

i like to confess that i am not very good in angular and still learning. i have to load huge data and has to show by dropdown. i would prefer if i could do the pagination at dropdown end. i am working with a custom dropdown which is good and taken from this site http://developers.dss.ucdavis.edu/angularjs-serachable-multiselect-dropdown-directive/

but the above custom multi select dropdown lack one feature for showing pagination link. so the problem is user can not show minimum data and click on other link on demand to load next set of data. just wonder anyone mind to add code in the custom directive which add pagination feature there.

so at a time i can load 20 data and click on next pagination link to load next 20 data. i have seen people already developed angular pagination directives. here is one similar link http://angularjs4u.com/pagination/top-5-angularjs-pagination-demos-2014/ hence i am new in angular so do not understand how to add custom pagination directive in another custom multi select dropdown directive.

it will be really good help if some one show me how to achieve it. thanks

Upvotes: 1

Views: 1577

Answers (1)

Dylan
Dylan

Reputation: 4773

With the same UI Bootstrap that they use in that blog there is a pagination directive.

Here's a Plunkr

A few key points here are:

  1. The normal ng-repeat is set as filtered variable to allow for update of search filter along with paginated.

    ng-repeat="item in filtered = (allItems | filter: ...

  2. In the same repeat after the filter you set a "limitTo" to set pagination on the list

    ... ) | limitTo:limit:begin

    Then you just need to follow the ui bootstrap pagination <uib-pagination total-items="filtered.length">

Upvotes: 2

Related Questions