Dynamically change Pagination page size from angular scope value

Question

I am trying to allow the user to change the number of rows in the table to be shown. The web app is used across all types of devices, and therefore the user will need to be able to choose the number of rows to be displayed to minimise scrolling.

This is the javascript model

$scope.pageSizes = [
  { size: 10},
  { size: 25, isSelected: true },
  { size: 50}
];

HTML code. This is my page size selector.

<li ng-repeat="pageSize in pageSizes">
  <a href="javascript:void(0)" ng-click="changePageSize(pageSize.size)"><span ng-class="{ orange: pageSize.isSelected }">{{pageSize.size}}</span></a>
</li>

And the table in the same HTML file.

<table st-table="users" st-safe-src="safeUsers" class="table-striped argus-table">
  <thead>
    <tr>
      <th st-sort="id" class="sortable min-width">Id</th>
      <th st-sort="username" class="sortable">Username</th>
      <th st-sort="email" class="sortable">Email</th>
      <th class="table-action-header"></th>
      <th class="table-action-header"></th>
      <th class="table-action-header"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td>ID</td>
      <td>Username</td>
      <td>Email</td>
      <td>Option 1</td>
      <td>Option 2</td>
      <td>Option 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="text-center" st-pagination="" st-items-by-page="25" colspan="6"></td>
    </tr>
  </tfoot>
</table>

st-items-by-page="25" is where I believe I must put my angular code.

I have tried using a scope function to find the newly selected

$scope.changePageSize = function (pageSize) {
  $scope.filter.pageSize = pageSize;

  _.find($scope.pageSizes, function (page) {
    if (page === pageSize) {
      $scope.selectedPageSize = page.size;
      page.isSelected = true;
    }
    else
      page.isSelected = false;
  });
};

And the footer again

<tfoot>
  <tr>
    <td class="text-center" st-pagination="" st-items-by-page="{{selectedPageSize}}" colspan="6"></td>
  </tr>
</tfoot>

However this causes the error

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{getSelectedPageSize}}] starting at [{getSelectedPageSize}}].

Any help would be appreciated. Thanks

Answer 1

Don't provide items per page using template notation ( {{scopeValue}} ), just provide an expression that resolved to a value you have on your $scope

this

st-items-by-page="{{selectedPageSize}}"

should be like this

st-items-by-page="selectedPageSize"

There is an example in the docs