Pagination: bind `itemsPerPage` in custom template

[benoror]

I would like to have access to the directive's itemsPerPage property in order bind it in my custom pagination template:

<div>
  <select
    ng-model="itemsPerPage"
    ng-options="o as o for o in itemsPerPage">
  </select>
  records per page
</div>

[benoror]

Plunker example: http://plnkr.co/edit/gSDBAx?p=preview

[michaelbromley]

Hi,

Since the itemsPerPage var would exist in the parent (controller) scope, and the dir-pagination-controls directive is isolated from that, there is no "simple" way to access outer scope variables.

I would suggest creating a "wrapper" directive around the dir-pagination-controls directive, and move the "itemsPerPage" select into the template of that directive, something like this:

<div>
   <div>
     <select ng-model="pageSize" ng-options="o as o for o in pageSize"></select>
     records per page
   </div>
   <dir-pagination-controls></dir-pagination-controls>
</div>

And set up that directive's API so you can pass in a binding to your parent scope's itemsPerPage value.

[benoror]

Hi @michaelbromley, thanks for your response. Sounds like a viable way to support this, since it's such a small component.

Nevertheless I keep wondering if wouldn't it be cleaner to expose itemsPerPage var inside dirPaginationControlsLinkFn (somewhere around here), does it makes sense to you?

[benoror]

Please refer to #212 for extra info and an example from ui-grid's implementation

[michaelbromley]

Yeah I guess it would be trivial to expose this value to the template - where you suggest makes sense. Then there would just need to be a line in the watcher to update that value whenever the itemsPerPage changes externally.

If you would like to implement this then let me know. Otherwise I'll add it to my mental "todo" list for next time I have some time to work on this.

[benoror]

Hi! I would be glad to contribute, could you give me a clue about where to look at?

Would this test be sufficient?

describe('pagination controls template API', function() {

    function compile() {
        var html = '<ul class="list"><li dir-paginate="item in collection | itemsPerPage: pageSize" current-page="currentPage">{{ item }}</li></ul> ' +
            '<dir-pagination-controls template-url="directives/pagination/testTemplate.tpl.html"></dir-pagination-controls>';
        $scope.collection = [1,2,3,4,5,6,7];
        $scope.pageSize = 3;
        $scope.currentPage = 1;
        containingElement.append($compile(html)($scope));
        $scope.$apply();
    }

    it('should provide correct values for page size', function() {
        compile();

        expect(containingElement.find('#tt-page-size').html()).toEqual('3');
        $scope.$apply(function() {
            $scope.pageSize = 2;
        });
        expect(containingElement.find('#tt-page-size').html()).toEqual('2');
    });

  /* ... */

[ejbaker]

+1 I would also like to do exactly this thing, a drop-down menu to select page size without a wrapper.

[HugCoder]

Yep, same thing I'm looking for. I'm trying to add a "pagination-limit" as its class is in Bootstrap pagination, next to the controls (right of it), something like this:

(boundary link)
<li>
        <a class="pagination-limit">
            <select name="Pagination_Limit" ng-model="pagination.limit" class="form-control pagination-limit">
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="99999">All</option>
            </select>
        </a>
    </li>
</ul>

but it won't bind to the pagination.limit. pagination only contains current and last.

[JasminSuma]

Does anyone solve this problem? I also want to use a dropdown for items per page purpose in template-url's html to make it generic. If anyone solved this please share your code here.