Angular Dir-Pagination and calling controller function

Question

I have an angular html snippet below of a table I am trying to wire up using Dir-Paginate and also have the table row change class based on a function on the controller.js

<tr dir-pagination="response in vm.responses  | toArray | orderBy:'-completionTime' | itemsPerPage: $root.pagination.itemsPerPage" class="{{ vm.getRowClass($index) }}">
    <td> {{ $index + 1 }}</td>
    <td><a ui-sref="response({uri:response.uri})">{{ response.name }}</a></td>
    <td><a href="mailto:{{ response.email }}">{{ response.email }}</a></td>
 <tr>

<dir-pagination-controls ng-show="appvm.showDataTable()" boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="ng/pagination"></dir-pagination-controls>

If i remove all of the Dir-Pagination syntax and make it just a normal ng-repeat the vm.getRowClass($index) works as it should, changing the class based on the function's logic. However, when I try to add the dir-pagination syntax in, i am given a $Index is undefined error.

Problem seems to be that Dir-Paginate does not allow me to pass in an $index or any item on the same line as the <tr>

Do you mean dir-paginate instead of dir-pagination? Also try ng-class instead of just class. I am passing $index into an ng-click function and it's taking just fine. — Ben Felda
– Ben Felda, Commented Jul 7, 2015 at 20:07

MaylorTaylor · Accepted Answer · 2015-07-07 20:35:15Z

1

After the comment and some playing around i found the solution.

I needed to add track by $index to the end of the itemsPerPage: $root.pagination.itemsPerPage area.

Shown correctly below.

<tr dir-pagination="response in vm.responses  | toArray | orderBy:'-completionTime' | itemsPerPage: $root.pagination.itemsPerPage track by $index" class="{{ vm.getRowClass($index) }}">
    <td> {{ $index + 1 }}</td>
    <td><a ui-sref="response({uri:response.uri})">{{ response.name }}</a></td>
    <td><a href="mailto:{{ response.email }}">{{ response.email }}</a></td>
 <tr>

answered Jul 7, 2015 at 20:35

MaylorTaylor

5,11116 gold badges52 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Dir-Pagination and calling controller function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related