Динамическое изменение размера страницы Pagination от значения угловой области

Question

Я пытаюсь позволить пользователю изменить количество строк в таблице, которые будут показаны. Веб-приложение используется на всех типах устройств, поэтому пользователю необходимо иметь возможность выбирать количество отображаемых строк, чтобы минимизировать прокрутку.

Это модель JavaScript

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

HTML код Это мой селектор размера страницы.

<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>

И таблица в том же файле HTML.

<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" вот где я считаю, что должен поставить свой угловой код.

Я попытался с помощью функции области, чтобы найти недавно выбранный

$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;
  });
};

И снова подвал

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

Однако это вызывает ошибку

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

Любая помощь будет оценена. Спасибо

Answer 1

Не указывайте элементы на странице, используя шаблонные обозначения ({{scopeValue}}), просто предоставьте выражение, которое разрешено до значения, которое у вас есть на вашем $scope

этот

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

должно быть так

st-items-by-page="selectedPageSize"

В документах есть пример