michaelbromley/angularutils-pagination

Simple pagination for AngularJS

angularutils-pagination's Issues

Pagination throw exception when dismissing the $mddialog Angularjs

Hi everyone,
the pagination works well but when displaying a dialog and dismiss then browser is frozen and show exception

Error in console (debug mode):

pagination directive: the itemsPerPage id argument (id: __default) does not match a registered pagination-id.

Please help me for it. Thank you so much.

Name of bower package

Hello @michaelbromley,

Your package is registered in bower.io as "angular-utils-pagination", so in the bower.js, I can see "name": "angularUtils-pagination".
Is it normal ? I think this difference may cause problemes with a override in a project.
I've found a workaround for now.

Have a nice day,
Gaël

Cannot use the letters 'as' in itemsPerPage expression, causes error.

I have a controller called the "DeceasedController" which I use with controller as in the following manner: "DeceasedController as deceasedController".

I get an error when I use:

itemsPerPage: deceasedController.size

The error is:

[$parse:syntax] Syntax Error: Token 'asedController.pageSize' is an unexpected token at column 37 of the expression [deceasedController.meals | filter:q asedController.pageSize] starting at [asedController.pageSize].

You can see it on this plunker here (modified from the demo):
http://plnkr.co/edit/pgG4FwaOnvdkoZbYZ3BA?p=preview

The reason for this is that the regex in dirPagination.js in the dirPaginationCompileFn
function treats the string 'as' in a special way.

Somehow matches 'as' in the wrong way, any expression containing the letters 'as' fails.

So masterController, blasterController etc etc cannot be used.

dirpaginate is not working inside a script type="text/ng-template" used for showing angular modals and the script is the child of another dirpaginate. Both dirpaginate is not working as expected.

Sample code:

<table class="table table-responsive table-condensed table-hover table-bordered">
        <thead>
        <tr>
            <th><a href="#" ng-click="sortType = 'ID'; sortReverse = !sortReverse">
                ID
                <span ng-show="sortType == 'ID' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'ID' && sortReverse" class="fa fa-caret-up"></span>
            </a></th>
            <th><a href="#" ng-click="sortType = 'firstName'; sortReverse = !sortReverse">
                First Name
                <span ng-show="sortType == 'firstName' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'firstName' && sortReverse" class="fa fa-caret-up"></span>
            </a></th>
            <th><a href="#" ng-click="sortType = 'lastName'; sortReverse = !sortReverse">
                Last Name
                <span ng-show="sortType == 'lastName' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'lastName' && sortReverse" class="fa fa-caret-up"></span>
            </a></th>
            <th><a href="#" ng-click="sortType = 'email'; sortReverse = !sortReverse">
                Email
                <span ng-show="sortType == 'email' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'email' && sortReverse" class="fa fa-caret-up"></span>
            </a></th>
            <th><a href="#">
                Transactions
            </a></th>
        </tr>
        </thead>
        <tbody>
        <tr dir-paginate="transaction in transactions | orderBy:sortType:sortReverse | filter:filter | itemsPerPage:10" pagination-id="adminTrans">
            <td scope="row">{{transaction.ID}}</td>
            <td>{{transaction.firstName}}</td>
            <td>{{transaction.lastName}}</td>
            <td>{{transaction.email}}</td>
            <td><div ng-controller="showTransactionModal">
                <script type="text/ng-template" id="showTransactionModal.html">
                    <div class="modal-header">
                        <button type="button" class="close" ng-click="cancel()" aria-hidden="true">&times;</button>
                        <h3 class="heading">Transactions</h3>
                    </div>
                    <div class="modal-body">
                        <div class="pull-right">
                            <button type="button" class="btn btn-default button-color form-control export" ng-csv="getArray" csv-header="getHeader()" filename="{{ filename }}"
                                    field-separator="{{separator}}" decimal-separator="{{decimalSeparator}}"
                                    ng-click="getReport()">Export to CSV</button>
                        </div>
                        <div class="form-group">
                            <div class="input-group gly-modal-add-1 margin-bot">
                                <input type="text" placeholder="Search " class="form-control" ng-model="filter">
                            </div>
                        </div>
                        <center>
                            <table class="table table-responsive table-condensed table-hover table-bordered">
                                <thead>
                                <tr>
                                    <th>
                                        <a href="#" ng-click="sortType = 'ID'; sortReverse = !sortReverse">
                                            ID
                                            <span ng-show="sortType == 'ID' && !sortReverse" class="fa fa-caret-down"></span>
                                            <span ng-show="sortType == 'ID' && sortReverse" class="fa fa-caret-up"></span>
                                        </a></th>
                                    <th><a href="#" ng-click="sortType = 'tDate'; sortReverse = !sortReverse">
                                        Date
                                        <span ng-show="sortType == 'tDate' && !sortReverse" class="fa fa-caret-down"></span>
                                        <span ng-show="sortType == 'tDate' && sortReverse" class="fa fa-caret-up"></span>
                                    </a></th>
                                    <th><a href="#" ng-click="sortType = 'amount'; sortReverse = !sortReverse">
                                        Amount
                                        <span ng-show="sortType == 'amount' && !sortReverse" class="fa fa-caret-down"></span>
                                        <span ng-show="sortType == 'amount' && sortReverse" class="fa fa-caret-up"></span>
                                    </a></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr dir-paginate="trans in allTransactions | orderBy:sortType:sortReverse | filter:filter| itemsPerPage:10" pagination-id="key1">
                                    <td>{{trans.ID}}</td>
                                    <td>{{trans.tDate}}</td>
                                    <td>{{trans.amount}}</td>
                                </tr>
                                </tbody>
                            </table>
                            <center>
                                <dir-pagination-controls pagination-id="key1"
                                        max-size="5"
                                        direction-links="true"
                                        boundary-links="true">
                                </dir-pagination-controls>
                                <!--<pagination
                                        ng-model="$parent.currentPage"
                                        total-items="allTransactions.length"
                                        max-size="maxSize"
                                        boundary-links="true">
                                </pagination>-->
                            </center>
                        </center>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default button-color" ng-click="cancel()">Cancel</button>
                    </div>
                </script>
                <button class="col-xs-12 btn btn-default btn-block button-color-trans" ng-click="open();setValue(transaction.ID);">View</button>
            </div>
            </td>
        </tr>
        </tbody>
    </table>
    <center>
        <dir-pagination-controls pagination-id="adminTrans"
                templateUrl="/account/dirPagination"
                max-size="5"
                direction-links="true"
                boundary-links="true">
        </dir-pagination-controls>
    </center>

Bower installation issue

bower install angularUtils-pagination gives the following error:
bower ENOTFOUND Package angularUtils-pagination not found

Can not install angularutils:pagination in meteor

When I run the command

meteor add angularutils:pagination

got the following error

 => Errors while adding packages:

While checking for angularutils:[email protected]:
error: No compatible binary build found for this package. Contact the
package author and ask them to publish it for your platform.

Please help to resolve this. Thanks

How can i make dirPagination work with browser history ?

I'm making a pushState every time a scope.setCurrent is called with the page number, and its working fine.

But I'm having a really hard time to make dirPagination set the page that is in the searchParam page when a 'onpopstate' event occurs.

I detailed my problem in a question on stackoverflow.

I'd love some help with this. I'm new to angularjs and this is for maintenance on an old project.