0

Similar to this question but angular specific:

I only want to show at most 5 pages at a time in the pagination. If possible current page should be centered. a brief illustration:

< [1] 2 3 4 5 > // not centered
< 1 [2] 3 4 5 > // not centered
< 1 2 [3] 4 5 > // centered
< 2 3 [4] 5 6 > // remains centered
< 3 4 [5] 6 7 > // remains centered

I'm at a loss for how to approach this.

This is what my view looks like:

<section>
    <div class="center">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li class="previous" ng-class="{ 'disabled': prevDisabled }">
                    <a href="#" ng-click="seek(page-1)" aria-label="Previous">
                        <i class="arrow_left"></i>
                    </a>
                </li>
                <li ng-repeat="(key,val) in pages" ng-class="{'active': key == page }"><a href="#" ng-click="seek(key)">{{key}}</a></li>
                <li class="next"  ng-class="{ 'disabled': nextDisabled }">
                    <a href="#" ng-click="seek(page+1)" aria-label="Next">
                        <i class="arrow_right"></i>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</section>
Community
  • 1
  • 1
r3wt
  • 4,642
  • 2
  • 33
  • 55
  • Checkout Angular UI Bootstrap pagination directive, the answer on this post shows max 5 pages (in addition to next last first previous buttons which you can remove if like), http://stackoverflow.com/a/17838375/368552 – Luke Hutton Feb 15 '17 at 18:56
  • 1
    @LukeHutton won't work for my usecase because of the way the devs have handcuffed the html of the directive. it was my first choice, though. I'll probably end up answering this question myself (in fact, i already have, just haven't written answer here yet) – r3wt Feb 15 '17 at 19:10

0 Answers0