CODEWITHSUNDEEP
javascriptangularjspagination
MaylorTaylor
MaylorTaylor

Reputation: 5041

Angular Dir-Pagination and calling controller function

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>

Upvotes: 1

Views: 1035

Answers (1)

MaylorTaylor
MaylorTaylor

Reputation: 5041

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>

Upvotes: 1

Related Questions