CODEWITHSUNDEEP
javascriptangularjspaginationangular-ui-bootstrapangular-ui
sg552
sg552

Reputation: 1543

How to assign value to angular pagination custom template?

I am using custom template for angular pagination:

            <uib-pagination
                boundary-links="(vm.pagination.boundaryLinks == false) ? false : true"
                num-pages="vm.pagination.numPages"
                total-items="vm.pagination.totalItems"
                items-per-page="vm.pagination.itemsPerPage"
                ng-model="vm.pagination.currentPage"
                max-size="(vm.pagination.pager == true) ? 0 : 10"
                template-url="pagination.html"            
                ng-change="vm.pagination.pageChanged(vm.pagination)">
            </uib-pagination>

<script id="pagination.html" type="text/ng-template">
  <ul class="pagination">
    <li ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(1)" title="First Page"> {{'FIRST' | translate}}</a></li>
    <li ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(page - 1)" title="Previous Page">{{'PREVIOUS' | translate}}</a></li>
    <li ng-repeat="page in pages track by $index" ng-class="{active: page.active}"><a href ng-click="selectPage(page.number)">{{page.text}}</a></li>
    <li ng-class="{disabled: noNext()}"><a href ng-click="selectPage(page + 1)" title="Next Page">{{'NEXT' | translate}}</a></li>
    <li ng-class="{disabled: noNext()}"><a href ng-click="selectPage(vm.pagination.numPages)" title="Last Page">{{'LAST' | translate}}</a></li>
  </ul>
</script>
<pre>Total: {{vm.pagination.numPages}}</pre>

It display nicely:

enter image description here

The problem is with the Last button. When I click it, it will not skip to last page. However if I assign value directly like this ng-click="selectPage(11) and click Last button, it will jump to the last page 11.

With the last code above, vm.pagination.numPages does contain value 11.

enter image description here

Anyone can help me with this? Thanks in advance.

Upvotes: 2

Views: 974

Answers (1)

Slava.K
Slava.K

Reputation: 3080

Your pagination template has isolated scope and, therefore, knows nothing about vm. Try selectPage(totalPages) instead

Upvotes: 1

Related Questions